使用bootstrap+Vue+node.js+ajax实现跨域访问
前提:拥有一个数据库,数据库中有一张有内容的表
以下内容所使用的表
1.express生成项目
下载npm,express-art-template,mysql
express demo(项目名)
npm install
npm install express-art-template
npm install mysql
2.编写node后台接口
(1)引入跨域模块
var cors = require('cors')//引入跨域模块
app.use(cors());//使用跨域模块
(2)修改默认view页面格式
app.engine('.html',require('express-art-template'))//设置引擎为express-art-template
app.set('view engine', 'html');//视图引擎指定html
(3)引入mysql,创建数据库池
新建一个文件夹config,在文件夹中新建一个文件config.js
这个文件用来创建数据库池,连接数据库,引入MySQL
var mysql = require("mysql");//引入mysql
var pool = mysql.createPool({
connectionLimit:20,
host:'127.0.0.1',//本地地址
user:'root',//用户
password:'jry20001115',//密码
database:'demo'//数据库名
})
module.exports = pool;
(4)创建查询student表的接口
//地址为:http://localhost:3000/stu
router.get('/stu',function(req,res){
pool.getConnection(function(err,conn){
if(err){
console.log('数据库连接失败')
throw err
}
else{
console.log('数据库连接成功')
let sql = "select * from student"
conn.query(sql,function(error,result){
if(error){
console.log('查询失败');
throw error
}
res.send(result);
conn.release();//释放数据库
})
}
})
})
启动项目
npm start
现在打开index页面会是以下形式
数据库中的所有内容会以json格式显示在页面上
3.在另一个文件夹下建立index.html
(1)引入文件
index.html文件中我们需要引入以下文件,具体文件可从bootstrap和vue的官网下载
<link rel="stylesheet" href="./test/public/stylesheets/bootstrap.min.css">
<script src="./test/public/javascripts/jquery.min.js"></script>
<script src="./test/public/javascripts/bootstrap.min.js"></script>
<script src="./test/public/javascripts/bootstrap-table.js"></script>
<script src="./vue.js"></script>
(2)创建页面的基本样式
html代码为
<div id="app" class="form-inline">
<label> 编号:<input type="text" v-model='id' class="form-control" placeholder="请输入学号"></label>
<label> 姓名:<input type="text" v-model='name' class="form-control" placeholder="请输入姓名"></label>
<button class="btn btn-success"><span class="glyphicon glyphicon-plus">添加</span></button>
<br><br>
<label> 查找:<input type="text" class="form-control" placeholder="请输入查找的姓名"></label> <button class="btn btn-success" @click="search(keyword)"><span class="glyphicon glyphicon-search">搜索</span></button>
<br><br><br>
<div style="width: 1000px; height: 500px; margin-top: 45px;">
<table class="table table-border table-hover table-striped">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr v-for="stu in students">
<td>{{stu.Sno}}</td>
<td>{{stu.Sname}}</td>
<td>{{stu.Ssex}}</td>
<td>{{stu.Sbirthday}}</td>
<td>{{stu.class}}</td>
</tr>
</tbody>
</table>
</div>
</div>
(3)实例化vue,创建异步ajax
new Vue({
el:"#app",
data:{
students:[],//创建一个数组,用来存放每个学生的数据
id:"",
name:"",
},
created:function(){
let self = this;//此时的this指向该实例化对象
$.ajax({
url:"http://localhost:3000/stu",
type:"get",
dataType:"json",
success:function(data){
//此时的this已经不再指向vue对象了
//谁调用这个函数指向谁
self.students = data;//此处的data就是student表接口处返回的result
}
})
}
})