1.下载上次的包 npm I ，同时下载新的包 axios
2.打开数据库服务器，同时使用新建数据库一样，数据包名
3.新建一个项目
4.全局注册axios
5.新建一个server文件夹（里面在建一个index.js的主文件）用来放我们后端写的东西
6.先写后端数据，我们这里要注意的一点。因为我们前端的端口是8080，而后端的端口是8088那么就会出现跨域问题，因此我们需要用cors在后端解决跨域问题。
先导包，然后使用插件
7.这里我们有一个需求，那就是当访问/user的时候可以从数据库读取数据。这里我们要注意的一点，那就是index.js中的数据要跟数据库中定义的数据相同
8.node index.js跑一下
9.在App.vue 书写前端代码。这里我们又有一个需求，点击一个按钮从数据库中读取数据。再点一个按钮从删除这条记录
10.交互
11.页面展示效果 npm run serve跑一下
12.主要代码展示
/server/index.js
// 引入express模块
var express = require('express')
var cors=require('cors')
var bodyParser = require('body-parser');
var mysql=require('mysql');
//创建express应用
var app = express()
app.use(cors())
app.use(bodyParser.urlencoded({
extended:true
}))
const db=mysql.createConnection({
host:'localhost',
user:"root",
password:'123456',
database:'vue'
});
db.connect(function(err){
if(err) throw err;
else
console.log('数据库连接成功');
})
// app.set('view engine','png')
// app.set('views','./views')
app.get('/user',function(req,res){
var sql='select * from user';
db.query(sql,function(err,results){
if(err)
console.log(err);
else {
res.send(results)
}
})
})
//在8081端口启动服务器
app.listen(8088,function(){
console.log("服务器启动成功")
})
App.vue
<template>
<div id="app">
<button @click="getData">获取数据</button>
<table border="1" cellpadding="0" align="center">
<tr bgcolor="antiquewhite"><td>序号</td><td>姓名</td><td>年龄</td><td>操作</td></tr>
<tr v-for="(c,index) in user">
<td>{ {index+1}}</td>
<td v-for="(value,key) in c">
<nobr>{ {value}}</nobr>
</td>
<td><input type="checkbox" @change="sle_course(c.name)"/></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
user:[{name:'',age:18}]
}
},
methods:{
getData(){
this.axios.get('http://127.0.0.1:8088/user').then(
(res)=>{
this.user=res.data
}
)
},
sle_course(name){
for(var i=0;i<this.user.lenght;i++){
if(this.user[i].name==name){
this.user.splice(i,1)
break
}
}
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.axios=axios
new Vue({
render: h => h(App),
}).$mount('#app')