用vue搭建前端页面、用node开发后端接口、数据库用mysql。这里只是简单的讲解搭建的逻辑是怎么样的，具体的一些应用还待挖掘。
学了node一直没有真正搞懂它是个什么玩意，总是说node就可以全栈了，简单一点理解就是前端开发者可以使用nodejs开发后端接口，然后自己实现全栈？？应该是这样的吧
目录结构
end为后端接口文件夹（node）front为前端的文件夹（vue）一、mysql数据库
先创建一个数据库，然后再创建表。然后添加数据。这里已经创建了一个名为test1的数据库，并在里面添加了3张表sc、course、student。数据库这里使用的是mysql。最好下一个Navicat，可视化比较好。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JlRrwvK0-1636074667079)(//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和qsnpm install axiosnpm 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
打开浏览器就可以看到数据啦！
