赞
踩
npm install -g @vue/cli
在该目录下创建一个文件夹
vue create testproject//vue create <文件夹名称>
根据需要进行选择,我一般选择第一个直接enter(回车)
完成之后会有提示
然后根据提示执行语句
第一步:进入项目
cd <project-name>
第二步:下载依赖
npm install
第三步:启动项目
npm run serve
出现如下界面就可以了
npm i express
npm i mysql
npm i --save axios
如果有需要的话,安装element ui
注意:vue3用element ui plus
npm install element-plus --save
在main.js中引入具体可以参考官方文档https://element-plus.gitee.io/zh-CN/
- // 连接数据库配置
- module.exports = {
- mysql: {
- host: 'localhost', // 域名,这是本机域名
- user: 'root', // MySQL 登录用户名
- password: '023120', // MySQL 登录密码 一般都是 root
- database: 'test', // 要连接的数据库名
- port: '3306', // 数据库端口号
- },
- };
- // 使用 express 创建服务器
- // 导入 express 模块
- const express = require('express');
- // 调用 express 函数,返回一个数据库实例
- const app = express();
- // 导入路由模块
- const userApi = require('./api/userApi');
- // 端口号
- const port = 8888;
- // 注册全局解析中间件
- app.use(express.json());
- app.use(express.urlencoded({ extended: false }));
- // 注册路由模块
- app.use('/api/user', userApi);
- // 调用 app.listen() 启动服务器
- app.listen(port, () => console.log(`Example app listening on port 8888!`));
- slqMap.js 写入 sql 语句
- // todo sql 语句留后面调用
- module.exports = {
- user: {
- // ? 占位符 后面给数据自动填充
- add: 'insert into te_user(id,name, age) values(?,?, ?)',
- get: "select * from te_user where name =?",
- },
- };
slqMap.js 写入 sql 语句
- // todo sql 语句留后面调用
- module.exports = {
- user: {
- // ? 占位符 后面给数据自动填充
- add: 'insert into te_user(id,name, age) values(?,?, ?)',
- get: "select * from te_user where name =?",
- },
- };
- // 测试用 api 实例
- var models = require('../db');
- var express = require('express');
- var router = express.Router();
- var mysql = require('mysql');
- var $sql = require('../sqlMap');
- // 连接数据库
- var conn = mysql.createConnection(models.mysql);
- conn.connect();
- var jsonWrite = (res, ret) => {
- if (typeof ret === 'undefined') {
- res.json({
- code: '1',
- msg: '操作失败',
- });
- } else {
- res.json(ret);
- }
- };
- // 增加用户接口
- // POST 请求
- router.post('/addUser', (req, res) => {
- var sql = $sql.user.add;
- var params = req.body;
- console.log(params);
- // ! [params.username, params.age] 自动填充到之前 ? 里面
- conn.query(sql, [params.id,params.name, params.age], (err, result) => {
- if (err) return console.log(err);
- if (result) {
- jsonWrite(res, result);
- }
- });
- });
- // GET 请求
- // router.get('/getUser', (req, res) => {
- // let sql = $sql.user.get;
- // let params = req.query;
- // console.log(params);
- // conn.query(sql, (err, result) => {
- // if (err) {
- // console.log(err);
- // }
- // console.log(res, result);
- // });
- // });
- // module.exports = router;
-
- router.post('/getUser', (req, res) => {
- let sql = $sql.user.get;
- let params = req.body;
- console.log(params);
-
- conn.query(sql,[params.name], (err, result) => {
- if (err) {
- console.log(err);
- }
- if (result) {
- jsonWrite(res, result);
- }
- });
- });
- module.exports = router;
由于直接访问8080端口,是访问不到的,所以这里需要设置一下代理转发映射.
在根目录中创建 的vue.config.js 文件,并写入以下内容
- module.exports = {
- devServer: {
- proxy: {
- '/api': {
- target: 'http://127.0.0.1:8888/api',
- changeOrigin: true, // 解决跨域
- pathRewrite: {
- '^/api': '',
- },
- },
- },
- },
- };
用 cmd 或者 PowerShell 打开 server 文件执行 node index,出现这个说明启动成功
注意:这里启动后服务器就不要关闭了,不然后面要报错,报错启动服务器就行在主页面编写
- <template>
- <div class="hello">
- 姓名<el-input
- v-model="name"
- placeholder="请输入姓名"
- class="w-50 m-2"
- ></el-input>
- <br>
- 年龄<el-input
- v-model="age"
- placeholder="请输入年龄"
- class="w-50 m-2"
- ></el-input>
- <br>
- <el-button @click="insert">录入</el-button>
- <br>
- 姓名<el-input
- v-model="queryname"
- placeholder="请输入姓名"
- class="w-50 m-2"
- ></el-input> <br>
- <el-button @click="query">查询</el-button>
- </div>
- </template>
-
- <script>
- import axios from "axios";
- export default {
- data() {
- return {
- name: "",
- age: "",
- queryname: "",
- };
- },
- mounted() {},
- methods: {
- insert() {
- let name = this.name;
- let age = this.age;
- let id = 5;
- axios
- .post(
- "/api/user/addUser",
- {
- id,
- name,
- age,
- },
- {}
- )
- .then((res) => {
- if(res.status==200){
- alert("录入成功")
- }
- });
- },
- query() {
- let name = this.queryname;
- // ! 这里不能在浏览器控制台里面打印出来,但是在服务端(cmd中或者power shell)可以打印出来,可以在服务端将值保存在 vuex 中
- axios
- .post("/api/user/getUser", { name },{})
- .then((res) => {
- if(res.status==200){
- console.log(res);
- this.name=res.data[0].name;
- this.age=res.data[0].age
- }
- })
- .catch((error) => {
- console.log(error);
- });
- },
- },
- };
- </script>
-
- <style scoped>
- .el-input{
- width: 30%;
- margin: 10px;
- }
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。