Use bootstrap + Vue + node.js + ajax para lograr acceso entre dominios

Use bootstrap + Vue + node.js + ajax para lograr acceso entre dominios

Requisito previo: Tiene una base de datos y hay una tabla con contenido en la base de datos. La tabla
utilizada por el siguiente contenido

1.Express para generar el proyecto

Descargar npm, express-art-template, mysql

express demo(项目名)
npm install
npm install express-art-template
npm install mysql

2. Escribe la interfaz de fondo del nodo

(1) Introducir módulos de dominio cruzado

var cors = require('cors')//引入跨域模块
app.use(cors());//使用跨域模块

(2) Modificar el formato de página de visualización predeterminado

app.engine('.html',require('express-art-template'))//设置引擎为express-art-template
app.set('view engine', 'html');//视图引擎指定html

(3) Introduzca mysql y cree un grupo de bases de datos

Cree una nueva configuración de carpeta y cree un nuevo archivo config.js en la carpeta.
Este archivo se utiliza para crear un grupo de bases de datos, conectarse a la base de datos e importar 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) Cree una interfaz para consultar la tabla de estudiantes

//地址为：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();//释放数据库
      })
    }
  })
})

Proyecto de inicio

npm start

Ahora, cuando abra la página de índice, tendrá el siguiente formato
: Todo el contenido de la base de datos se mostrará en la página en formato json.

3. Cree index.html en otra carpeta

(1) Importar documentos

En el archivo index.html, debemos introducir los siguientes archivos, los archivos específicos se pueden descargar desde el sitio web oficial de bootstrap y 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) Crea el estilo básico de la página

El código html es

    <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) Instancia de vue, crea ajax asincrónico

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

Resultado final