クロスドメインアクセスを実現するには、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.ノードのバックグラウンドインターフェイスを作成します
（1）クロスドメインモジュールを導入する
var cors = require('cors')//引入跨域模块
app.use(cors());//使用跨域模块
（2）デフォルトのビューページフォーマットを変更する
app.engine('.html',require('express-art-template'))//设置引擎为express-art-template
app.set('view engine', 'html');//视图引擎指定html
（3）mysqlを導入し、データベースプールを作成します
新しいフォルダー構成を作成し、フォルダー内に新しいファイル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）学生テーブルをクエリするためのインターフェイスを作成します
//地址为：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
これで、インデックスページを開くと、次の形式になり
ます。データベース内のすべてのコンテンツがjson形式でページに表示されます。
3.別のフォルダーにindex.htmlを作成します
（1）ドキュメントのインポート
index.htmlファイルでは、次のファイルを紹介する必要があります。特定のファイルは、bootstrapとvueの公式Webサイトからダウンロードできます。
<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
}
})
}
})
最終結果
