vue+node.js+mysql项目搭建初体验（接口）

用vue搭建前端页面、用node开发后端接口、数据库用mysql。这里只是简单的讲解搭建的逻辑是怎么样的，具体的一些应用还待挖掘。

学了node一直没有真正搞懂它是个什么玩意，总是说node就可以全栈了，简单一点理解就是前端开发者可以使用nodejs开发后端接口，然后自己实现全栈？？应该是这样的吧

目录结构

• end为后端接口文件夹（node）
• front为前端的文件夹（vue）

一、mysql数据库

数据库这里使用的是mysql。最好下一个Navicat，可视化比较好。

• 先创建一个数据库，然后再创建表。然后添加数据。
• 这里已经创建了一个名为test1的数据库，并在里面添加了3张表sc、course、student。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JlRrwvK0-1636074667079)(https://i.loli.net/2021/10/30/ZoaDRhnVgpqrENu.png)]

这样数据库这里就差不多啦！

二、nodejs后端

• 在end文件夹中初始化一个node(express)项目

npm init

• 在项目中安装 express和mysql

npm install mysql express --save

• 新建一个文件index.js为入口文件
  

• 在index.js里面写入

const express = require("express");
const app = express();
const mysql = require("mysql");

app.listen(3001,()=>{
    console.log("服务器开启3001端口...")
})


// 创建与数据库的连接
const db = mysql.createConnection({
    host:'localhost',
    user:"root",
    password:'*****',
    database:"test1"    //数据库名称
})

db.connect((err)=>{
    if(err) throw err;
    console.log("连接成功");
})

//getpost就是接口
app.get("/getpost",(req,res)=>{
    let sql = "select * from student";
    db.query(sql,(err,result)=>{
        if(err){
            console.log(err);
        }else{
            //将数据转换为json格式
            var dataString = JSON.stringify(result);
            var data = JSON.parse(dataString);
            res.json({
                status:'0',
                msg:data
            })
        }
    })
})

这里我们已经定义了一个接口：http://localhost:3001/getpost

那就去vue里使用吧！

三、vue前端

• 在front文件夹中初始化一个vue项目
• 安装axios和qs

npm install axios
npm install qs

• 在路由router.js中定义路由跳转

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../components/main.vue'  //这是新建的测试文件

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main
  },
]

const router = new VueRouter({
  routes
})

export default router

• 在main.vue中写入：

<template>
  <div class="hello">
     <div>hellow</div>
      <div v-for="(item,value) in arr" :key="value">
          <div>{{item.class}}</div>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
export default {
  name: 'Main',
  data()
  {
      return {
        //   name:'',
        //   age:''
        arr:''
      }
  },
  methods:{
      getdata(){
          console.log('函数执行了');
                axios({
                    url:`/API/getpost`, //后端的接口地址                    	
                    method:"get",//注意，这里没有s！！！
                    transformRequest:[
                        function(data){
                            data = qs.stringify(data);
                            return data;
                        },
                    ],
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    dataType:"json",
                })
                .then((res) => {
                    console.log("连接成功");//这里打印出来是为了更直观的看到连接成功了
                    console.log(res); //res是后端返回来的数据，如果连接成功，则把res打印出来
                    this.arr = res.data.msg//这里进行传回数据的赋值
                    //this.age = res.data.msg[0].sage //让本页的数据等于回传的数据
                })
                .catch(function(error){
                    console.log("连接失败");
                    console.log(error); //如果连接失败，则抛出错误的信息
                });
      }
  },
  created(){
      this.getdata();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>

• 不要忘了还要解决跨域的问题，在front文件夹下创建一个 vue.config.js文件，并写入：

module.exports = {
    
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: true,
    productionSourceMap: false,
    devServer: {
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/API': {
                target: `http://localhost:3001`,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                '^/API': ''
                },
            }
        }
    }
}

四、测试

• 开启node服务

node index.js

• 开启vue服务

npm run serve

• 打开浏览器就可以看到数据啦！
  

总结

• 摸了一天终于有点小明白了
• 看了一些我觉得有用的博客:
  • https://blog.csdn.net/weixin_43816287/article/details/101051671
  • https://www.cnblogs.com/easth/p/nodejs_mysql.html
• 继续摸索…pm run serve