1使用webpack下載vue模板
vue init webpack aaa（aaa為項(xiàng)目名稱）
cd到aaa文件夾下
?cd aaa
? ?安裝依賴
npm i
運(yùn)行項(xiàng)目
npm run dev
如上圖則運(yùn)行成功
?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組件內(nèi)容
<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="賬號(hào)" 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: '請(qǐng)輸入用戶名', trigger: 'blur' },
{ min: 5, max: 10, message: '長(zhǎng)度在 5 到 10 個(gè)字符', trigger: 'blur' }
],
password: [
{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' },
{ min: 5, max: 10, message: '長(zhǎng)度在 5 到 10 個(gè)字符', 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('接收返回?cái)?shù)據(jù)', res.data[0].realname)
console.log('接收返回?cái)?shù)據(jù)', 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中配置下路由
若出現(xiàn)loader加載報(bào)錯(cuò)
常規(guī) 執(zhí)行 npm install stylus-loader css-loader style-loader --save-dev?
?less 執(zhí)行 npm install less less-loader --save-dev?
?sass 執(zhí)行 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
輸賬號(hào)密碼admin測(cè)試一下 登錄 打開network
404是正常的因?yàn)槲覀冞€沒搭建服務(wù)器
賬號(hào)密碼已經(jīng)發(fā)給后臺(tái)了稚叹。
到這里前端的任務(wù)已經(jīng)差不多了懂拾。
express.js搭建服務(wù)器
npm i express安裝服務(wù)器?
express tempserver -e
最新express4.0版本中將命令工具分家出來了(項(xiàng)目地址:https://github.com/expressjs/generator),所以我們還需要安裝一個(gè)命令工具,命令如下:npm install -g express-generator? ????
?tempserver是server文件夾 自定義
?cd 到tempserver 執(zhí)行 npm i 安裝依賴
在tempserver的app.js的最后
//監(jiān)聽888
端口
app.listen(888, () => {
console.log('服務(wù)器已經(jīng)啟動(dòng)。蔫缸。。')
})
module.exports = app
nodemon app 命令啟動(dòng)服務(wù)器
如果報(bào)錯(cuò)有可能是因?yàn)闆]有安裝nodemon命令?
npm install -g nodemon
chrome中
8080和888端口有跨域問題募谎，在開發(fā)環(huán)境中可以自行配置
//aaa/config/index.js
proxyTable:{
'/api': {
target: 'http://localhost:888', // 目標(biāo)接口域名
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' // 重寫接口
}
}
}
//tempserver/routes/index.js
router.post('/api/login',function(req,res,next){
res.send('返回請(qǐng)求')
})
//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('接收返回?cái)?shù)據(jù)',res.data[0].realname)
console.log('接收返回?cái)?shù)據(jù)',this.realname)
this.open()
}
})
如圖現(xiàn)在已經(jīng)200成功了左电，并且接收到服務(wù)器的返回值
node連接mysql數(shù)據(jù)庫
記得要啟動(dòng)mysql數(shù)據(jù)庫
如果你配置了mysql的環(huán)境變量那應(yīng)該不會(huì)報(bào)錯(cuò)，如果沒有配置切換到phpstudy下安裝的mysql文件夾下的bin中執(zhí)行命令?
mysql -hlocalost -uroot -proot?
我寫的這是默認(rèn)賬號(hào)密碼
若報(bào)錯(cuò)他下面有提示
我根據(jù)他的提示加了.\ 就成功了
展示所有數(shù)據(jù)庫
show databases;
或者 下載工具?Navicat for MySQL 可視化操作
Navicat for MySQL 的下載地址
鏈接: https://pan.baidu.com/s/1t7bqmEJyvlaiJ7lwS4H7rw 提取碼: ka89?
新建temp數(shù)據(jù)庫然后是temp表
接著是node.js連接數(shù)據(jù)庫
https://www.runoob.com/nodejs/nodejs-mysql.html
在tempserve下
npm i mysql --save
涉及到服務(wù)器放在tempserve/routes/新建一個(gè)conn.js用來寫連接數(shù)據(jù)庫的代碼
//tempserve/routes/conn.js
const mysql = require('mysql')
//創(chuàng)建連接
let connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'temp' // 數(shù)據(jù)庫名稱（我的數(shù)據(jù)庫叫temp）
})
//暴漏模塊
module.exports = connection
在//tempserve/routes/index.js中引入connection
//tempserve/routes/index.js
let connection = require('./conn')
// 連接數(shù)據(jù)庫
connection.connect(() => {
?? ?console.log('數(shù)據(jù)庫連接成功')
})
說明連接成功
sql查詢語句
tempserve/routes/index.js
var express = require('express')
var router = express.Router()
let connection = require('./conn')
// 連接數(shù)據(jù)庫
connection.connect(() => {
console.log('數(shù)據(jù)庫連接成功')
})
/* 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 //有錯(cuò)誤拋出
} else {
?? ?res.send(data)//正確的話返回給前端
}
})
})
module.exports = router
再次到瀏覽器中登錄
*有時(shí)候裝完依賴需要重啟一下服務(wù)才行
demo 地址 ：https://github.com/xiamengmeng1023/element-ui-admin-demo.git
