1使用webpack下载vue模板
vue init webpack aaa（aaa为项目名称）
cd到aaa文件夹下
cd aaa
安装依赖
npm i
运行项目
npm run dev
如上图则运行成功
npm i element-ui -S (安装element-ui)
npm i axios --save (安装axios)
在main.js中引入element-ui axios
//main.js
import ElementUIfrom'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axiosfrom'axios'
//挂载axios到Vue原型上
Vue.prototype.axios=axios
Vue.use(ElementUI)
3 然后是login组件内容
<template>
<div class="login">
<el-form
:model="loginForm"
status-icon
:rules="rules"
ref="loginForm"
label-width="100px"
class="demo-loginForm"
>
<div class="loginHead">
<i class="el-icon-s-operation"></i>
<h3>登录</h3>
</div>
<el-form-item label="账号" prop="username">
<el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
realname: '',
loginForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
]
}
}
},
methods: {
open () {
let _this = this
this.$message({
message: `欢迎您,${_this.realname}`,
type: 'success'
})
},
submitForm (formName) {
this.$refs[formName].validate(valid => {
if (valid) {
let that = this
this.axios
.post('/api/login', {
username: that.loginForm.username,
password: that.loginForm.password
})
.then(res => {
if (res.data.length) {
that.realname = res.data[0].realname
console.log('接收返回数据', res.data[0].realname)
console.log('接收返回数据', this.realname)
this.open()
}
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#app,
.login {
height: 100%;
}
.login {
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
}
.el-form {
width: 400px;
padding: 20px 20px 10px 10px;
border: 1px solid #999;
background-color: #fff;
border-radius: 10px;
}
.loginHead {
display: flex;
justify-content: center;
align-items: center;
h3 {
margin-left: 20px;
}
}
</style>
记得在router的index.js中配置下路由
若出现loader加载报错
常规 执行 npm install stylus-loader css-loader style-loader --save-dev
less 执行 npm install less less-loader --save-dev
sass 执行 npm install sass sass-loader --save-dev 或者（$npm intall sass-loader --save ; $npm install node-sass --save）
npm install stylus-loader css-loader style-loader --save-dev
npm install less less-loader --save-dev
npm install sass sass-loader --save-dev
输账号密码admin测试一下 登录 打开network
404是正常的因为我们还没搭建服务器
账号密码已经发给后台了。
到这里前端的任务已经差不多了。
express.js搭建服务器
npm i express安装服务器
express tempserver -e
最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator),所以我们还需要安装一个命令工具,命令如下:npm install -g express-generator
tempserver是server文件夹 自定义
cd 到tempserver 执行 npm i 安装依赖
在tempserver的app.js的最后
//监听888
端口
app.listen(888, () => {
console.log('服务器已经启动。。。')
})
module.exports = app
nodemon app 命令启动服务器
如果报错有可能是因为没有安装nodemon命令
npm install -g nodemon
chrome中
8080和888端口有跨域问题，在开发环境中可以自行配置
//aaa/config/index.js
proxyTable:{
'/api': {
target: 'http://localhost:888', // 目标接口域名
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' // 重写接口
}
}
}
//tempserver/routes/index.js
router.post('/api/login',function(req,res,next){
res.send('返回请求')
})
//aaa/src/components/login.vue中
//此处的/api/login就上面定义的接口
this.axios
.post('/api/login',{
username:that.loginForm.username,
password:that.loginForm.password
})
.then(res=>{
if(res.data.length){
that.realname=res.data[0].realname
console.log('接收返回数据',res.data[0].realname)
console.log('接收返回数据',this.realname)
this.open()
}
})
如图现在已经200成功了，并且接收到服务器的返回值
node连接mysql数据库
记得要启动mysql数据库
如果你配置了mysql的环境变量那应该不会报错，如果没有配置切换到phpstudy下安装的mysql文件夹下的bin中执行命令
mysql -hlocalost -uroot -proot
我写的这是默认账号密码
若报错他下面有提示
我根据他的提示加了.\ 就成功了
展示所有数据库
show databases;
或者 下载工具 Navicat for MySQL 可视化操作
Navicat for MySQL 的下载地址
链接: https://pan.baidu.com/s/1t7bqmEJyvlaiJ7lwS4H7rw 提取码: ka89
新建temp数据库然后是temp表
接着是node.js连接数据库
https://www.runoob.com/nodejs/nodejs-mysql.html
在tempserve下
npm i mysql --save
涉及到服务器放在tempserve/routes/新建一个conn.js用来写连接数据库的代码
//tempserve/routes/conn.js
const mysql = require('mysql')
//创建连接
let connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'temp' // 数据库名称（我的数据库叫temp）
})
//暴漏模块
module.exports = connection
在//tempserve/routes/index.js中引入connection
//tempserve/routes/index.js
let connection = require('./conn')
// 连接数据库
connection.connect(() => {
console.log('数据库连接成功')
})
说明连接成功
sql查询语句
tempserve/routes/index.js
var express = require('express')
var router = express.Router()
let connection = require('./conn')
// 连接数据库
connection.connect(() => {
console.log('数据库连接成功')
})
/* GET home page. */
router.post('/login', (req, res) => {
let {
username,
password
} = req.body
// console.log(username, password)
let sqlStr = `select * from temp where username='${username}' and password='${password}'`//sql查询语句 temp是表名字
connection.query(sqlStr, (err, data) => {
if (err) {
throw err //有错误抛出
} else {
res.send(data)//正确的话返回给前端
}
})
})
module.exports = router
再次到浏览器中登录
*有时候装完依赖需要重启一下服务才行
demo 地址 ：https://github.com/xiamengmeng1023/element-ui-admin-demo.git
