使用bootstrap+Vue+node.js+ajax实现跨域访问

使用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
                    }
                })
            }
        })

最后的结果