20201019王杉

学习内容：

搭建本地服务器：

1. 创建空项目：

   创建项目文件名如：VueProject

2. 初始化项目:

   进入项目cmd 输入npm init -y/npm init;，初始化完成后，会在当前目录下，生成一个package.json文件，用来保存我们要下载的插件和模块：

3. 使用express搭建本地服务器:

   express是第三方的，模块（框架），所以需要下载（npm install express --save）

   --save：是将我们下载的第三方模块保存到package.json文件中

   下载完成后，express的模块就在node_moudles的文件中：

4. 使用express搭建本地服务器

   ①在当前的文件下，创建app.js文件

   ②在app.js中引入express模块

   const express=require("express");
   

   ③使用express的api创建服务器

   var app=express();
   

   ④为服务器绑定监听的端口(port)

   app.listen(4000,()=>{
   console.log("serve is running...")
   
   })
   

   ⑤启动服务器(黑窗口中输入)

   node app.js

   第三方的启动方(nodemon)

   注意：输入两遍ctrl+c 关闭服务器

   (使用这个一直处于监听状态改变保存就会执行)

   ⑥添加访问路径：

   app.get("/",(req,res)=>{
    res.send("hello vue")
   
   })
   

   访问 localhost:4000

5. 创建文件router，保存路由器

   ①在当前的文件夹下，创建router.js文件

   ②引入express模块

   const express=require("express");
   

   ③创建空的路由器对象

   var router=express.Router();
   

   ④添加路由

   router.get("/list",function(req,res){
    res.send("hello list")
   
   })
   

   ⑤最后导出路由：

   module.exports=router;
   

6. 在app.js中引入使用router路由器单个文件

   cosnt routerlist=require("./router.js");
   

app.use("/router",routerlist);

   网页中的地址栏输入：localhost:4000/router/list 访问
   
   ![17](C:\Users\W\Desktop\VueProjectImg\17.png)

### 操作数据库

1. 下载mysql模块：

   使用npm install mysql 下载模块

   ![18](C:\Users\W\Desktop\VueProjectImg\18.png)

2. 创建pool的文件夹，在当前文件夹下创建pool.js文件

3. 在pool.js中引入mysql模块

   ```js
   const mysql=require("mysql");

1. 创建连接池:

   var pool=mysql.createPool({
     host:"127.0.0.1",  // 服务器di地址
   
     port:"3306",    // 端口号
   
     user:"root",    // 用户名
   
     password:"root",  // 密码
   
     database:"ljf",    // 数据库名称  
   
     connectionLimit:20    // 设置最大连接数，不写也可以，默认15
   
   })
   

2. 导出连接池：

   module.exports=pool;
   

在路由器中操作数据库：

• 管理员权限启动数据库，及其可视化工具方便操作，数据库连接根据上面的数据的填写

记得在router中头部导入连接池

//导入连接池
const pool=require("./pool/pool.js")
const mysql=require("mysql")

使用get请求操作数据库数据，第一个是MySQL操作以下是查询一个表

pool.query("select * from 表名",[],(request,response)=>{

        // res.send(response)

})

随后创建一个html页面axios.html，记得引入该引入的js文件，绑定一个按钮点击将调用axios的get方法，获取从服务器端http://localhost:4000/router/list返回数据：

即点击发送请求按钮时控制台就会返回输出一串从本地数据库调用的数据：

axios post请求：

axios.post("url","参数1=值1&参数2=值2&...").then(result=>{
    result.data
})

注意：get和post方法传参时，配置属性名不一样，get请求传参，用的params：{}对象，而post请求传参，必须是字符串

服务器端获取 get 请求的参数 req.query

服务器端获取post请求的参数 不能使用req.query

我们使用body-parser中间件

下载body-parser中间件：npm install body-parser --save

我们需要在app.js中头引入body-parser因为app.js下面要用到：

//1.引入express文件
const express = require('express');
//引入路由
var routerList=require("./router.js");

//引入body-parser 
const bodyParser = require('body-parser')

//2.创建服务器
var app = express();
//使用中间件 记得使用这个之前必须在路由调用之前
app.use(bodyParser.urlencoded({
    extended:false
}))

//路由使用
app.use("/router",routerList);

注意：使用中间件 记得使用这个之前必须在路由调用之前

然后是在router.js头部导入body-parser因为router.js下面要用到 :

//路由(express)
const express=require("express");
//导入连接池
const pool=require("./pool/pool.js")
const mysql=require("mysql")
//导入body-parser
const bodyParser = require('body-parser')

//创建空的路由器对象
var router=express();
//添加路由
//记得使用get和post记得修改
router.post("/list",function(req,res){
    //返回数据
    //  res.send('我是list')
    //操作数据
    // console.log(req.query())

    //跨域 请求访问 200状态码 访问成功   *范围几乎所有都可访问
    res.writeHead(200,{
        "Access-Control-Allow-Origin":"*"
    })
    // pool.query("SELECT * FROM CHARACTER_SETS",[],(request,response)=>{
    //     // res.send(response)
    //     res.write(JSON.stringify(response));
    //     res.end();
    // })
    console.log(req.body)
})
module.exports=router;

最后就是：axios中写post请求：（暂时写在之前get里面）

最后点击发送请求 cmd显示我们收到的对象即为成功！

学习总结：

学习了很多，加油！