用【mysql,vue,node】制作一个前后端分离小项目

这篇具有很好参考价值的文章主要介绍了用【mysql,vue,node】制作一个前后端分离小项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


☀️作者简介:大家好我是言不及行yyds
🐋个人主页:言不及行yyds的CSDN博客
🎁系列专栏:【前端项目】

自制全栈项目

1.准备技术

1.1mysql

根据基本的mysql语句,创建一个本地mysql的数据,
用于向前端页面展示。

在这里是我创建的一个db.sql文件

>CREATE TABLE `tbl_user` (
  `tbl_id` int(4) NOT NULL AUTO_INCREMENT COMMENT '主键id',
  `tbl_name` varchar(32) NOT NULL COMMENT '属性名称',
  `tbl_age` int(4) NOT NULL COMMENT '年龄',
  `tbl_sex` varchar(32)  NOT NULL DEFAULT 'man',
  `tbl_eamil` varchar(32) NOT NULL COMMENT '邮箱',
  `tbl_state` varchar(32)  NOT NULL DEFAULT 'man',
  `tbl_show` varchar(32)  NOT NULL COMMENT '操作',
    PRIMARY KEY (`tbl_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3803 DEFAULT CHARSET=utf8 COMMENT='属性表';INSERT INTO `tbl_user` VALUES('1','张三','18','男','3123131@qq.com','false','操作');
INSERT INTO `tbl_user` VALUES('2','李四','23','女','31312432@qq.com','false','操作');
INSERT INTO `tbl_user` VALUES('3','张大帅','34','女','32452345@qq.com','false','操作');
INSERT INTO `tbl_user` VALUES('4','赵友情','32','男','24352334@qq.com','true','操作');
INSERT INTO `tbl_user` VALUES('5','张璐','32','女','6456743565@qq.com','true','操作');
INSERT INTO `tbl_user` VALUES('6','朴新凯','12','男','252345232@qq.com','true','操作');
INSERT INTO `tbl_user` VALUES('7','李浩','42','女','234523452@qq.com','false','操作');
INSERT INTO `tbl_user` VALUES('8','张易','33','女','12341234@qq.com','true','操作');
INSERT INTO `tbl_user` VALUES('9','朴动议','22','男','12341234@qq.com','true','操作');
INSERT INTO `tbl_user` VALUES('10','李使其','12','女','12341234@qq.com','false','操作');

关于怎么将该文件导入数据库
请参考:phpstudy导入mysql文件到数据库

1.2 node的express框架

学会用于express搭建一个服务器,封装mysql
操作语句并向前端发送数据并处理前端
发送的信息

在这个后端服务器主要有几大模块
1.2.1.创建接口
1.2.2创建连接mysql的文件
1.2.3编写mysql语句

1.3vue相关的技术

搭建vue项目,学会怎么引入模块,
怎么使用vue-router的使用,怎么
将方法挂在在全局

1.4怎么使用element-ui展示数据

1.5利用axiso接收从服务器传来的数据

2.项目开始

展示项目:

全栈小项目1

2.1需要搭建的前端界面

用【mysql,vue,node】制作一个前后端分离小项目
用【mysql,vue,node】制作一个前后端分离小项目
用【mysql,vue,node】制作一个前后端分离小项目

2.2搭建前端代码

2.2.1用vue创建项目

npm i @vue/cli
vue create projectName(你项目的名称)

2.2.2下载响应的包

npm i axios -S
npm i vue-router -S(可能版本有问题,可降低版本)
npm i element-ui -S

2.2.3搭建vue项目基本架构

在components创建homeItem.vue组件用于展示数据
导入到router的index文件中形成路由

在router下创建index.js用于映射路由
用【mysql,vue,node】制作一个前后端分离小项目
index.js的代码为

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
import Home from '../components/HomeiTEM.vue'

const route=new VueRouter({
    routes:[
        //将初始路径改为home
        {
            path:'/',
            redirect:'/home'
        },
        //映射home组件,到home路径
        {
            path:'/home',
            component:Home,
        }
    ]
})

export default route

之后在main.js中应用配置好的路由,
并引入相关的包,并完成相关全局配置

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
//引入element-ui与相关的样式
import '../node_modules/element-ui/lib/theme-chalk/index.css'
import elementui from 'element-ui'
import './css/index.css'
//导入axios
import axios from 'axios'
//导入element-ui需要的组件,消息提示
import {Message,MessageBox} from 'element-ui'

//将消息提示框挂载到全局,便于在vue项目中任何地方引用
Vue.prototype.$message=Message
Vue.prototype.$confirm=MessageBox.confirm
Vue.config.productionTip = false
//使用element-ui
Vue.use(elementui)
//设置请求的基本地址
axios.defaults.baseURL='http://127.0.0.1:3000/'
//将axios挂载到全局,便于在vue项目中任何地方引用
Vue.prototype.$http=axios
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
2.2.4设置homeItem

在这个项目中是一个上,中,下,侧边的布局
在element官网的容器查看使用方法。
我们主要配置中心区域,
需要用到的组件是
el-container el-button,
el-table,el-switch el-dialog

<el-main>
     <div class="titleItem">练习增删改查</div>
     <el-button type="primary" @click="dialogVisible=true">添加用户</el-button>
        <!--展示数据区域-->
        <el-table
          :data="tableList"
           style="width: 100%">
         <!--展示数据姓名行区域-->
         <el-table-column
           prop="tbl_name"
           label="姓名" >
      	</el-table-column>
            </el-table>
          </el-main>

基本架构,完整代码我会在我的资源中展示

2.3搭建后端代码

2.3.1 用express创建项目

npm i express -S
express create projectName(后端项目的名称)

2.3.2连接mysql文件

在项目的db目录向创建index.js

const mysql=require('mysql')
var coon=mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'123456'//数据库密码
    database:'user_table'//需要连接数据库的名称
})
coon.connect(()=>{
    console.log('数据库连接成功')
})
module.exports=coon//暴露用于后续进行mysql操作。
2.3.3搭建后台服务器代码

在router的index,js中创建接口代码

var express = require('express');
var router = express.Router();
//导入连接mysql的函数,用于后于的mysql操作
const coon = require('../db/index')

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

//得到mysql数据库内的数据
router.get('/datas', (req, res, next) => {
  coon.query('select*from tbl_user', (err, data) => {
    if (err) res.send({ status: 400, message: '请求失败' })
    res.send({ status: 200, message: '请求数据成功', data: data })
  })
})

//添加用户
router.post('/adduser', (req, res, next) => {
  const parms = req.body
  //将数据导入mysql数据库的语句
  
  coon.query(`INSERT INTO tbl_user(tbl_id, tbl_name, tbl_age, tbl_sex, tbl_eamil, tbl_state, tbl_show) 
  VALUES
('${parms.tbl_id}','${parms.tbl_name}','${parms.tbl_age}','${parms.tbl_sex}','${parms.tbl_eamil}','${parms.tbl_state}','${parms.tbl_show}')`, (err, data) => {
    if (err) {
      res.send({ code: 1,status: 300, message: "增添数据失败" }) 
      return
    }
    res.send({ code: 0, status: 200, message: '添加数据成功', data: data })
  })
})
//按照传入的id删除对应的一行数据
router.delete('/deluser/:id', (req, res, next) => {
  const parms = req.params
  //删除指定id对应行数据的mysql数据库的语句
  coon.query(`delete from tbl_user where tbl_user.tbl_id='${parms.id}'`, (err, data) => {
    if (err){
      res.send({ code: 1, message: "删除数据失败" })
      return
    } 
    res.send({ code: 1, status: 200, message: '删除数据成功', data: data })
  })
})
module.exports = router;
2.3.4配置解决跨域代码

在这里我们利用cors来解决

在app.js中书写代码

//用于设置跨域问题cors策略
var allowCrosDown=function(req,res,next){
  res.header('Access-Control-Allow-Origin','*')
  res.header('Access-Control-Allow-Methods','*')
  res.header('Access-Control-Allow-Headers','*')
  next()
}
app.use(allowCrosDown)

2.4书写接口文档

在这里主要有三个接口

获得mysql库数据(/datas)
请求方式:GET,
请求参数:无

增添用户(/adduser)
请求方式:post
请求参数:tbl_id:‘’,
tbl_name:‘’,
tbl_age:‘’,
tbl_sex:‘’,
tbl_email:‘’,
tbl_state:‘’,
tbl_show:‘’

删除用户(/deluser/:id)
请求方式:delete
请求参数:tbl_id

2.5完善前端代码

需要完善的是,获得mysql数据,
展示,点击添加用户弹出对话框
为每一个输入框设置限制,
点击删除,弹出提示框,
只有点击确定时,开始删除该行
的数据。接下来就是一些界面优化

完整代码可以评论区找我获取

3.总结

在这个项目中我们用到那些知识点
1.利用axios获取后台数据,
2.利用element-ui搭建界面
3.用cros解决跨域问题。
4.用vue,express创建项目
5.利用mysql语句操作mysql数据库。
6.利用vue的语法使数据具有动态性

好了,这次介绍就这么多,如果各位
有什么建议,欢迎评论区。期待各位能
🎈🎟点赞 🎨🎪评论
🎭🦺收藏 🎫🎟关注文章来源地址https://www.toymoban.com/news/detail-465336.html

到了这里,关于用【mysql,vue,node】制作一个前后端分离小项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月12日
    浏览(66)
  • ruoyi-vue(若依前后端分离版本)环境搭建 用idea 安装redis 后端配置 配置node环境 前端配置

    1.在https://gitee.com/y_project/RuoYi-Vue下载源码并解压至本地文件 2.将sql文件下的两个sql文件导入数据库生成表  3.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication-druid.yml修改数据库名和密码 4.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication.yml配置red

    2024年04月14日
    浏览(48)
  • node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

    大家好,我是yma16,本文分享关于 node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染。 技术选型 前端:vite+vue3+antd 后端:node koa 数据库:mysql koa是一个现代的Node.js框架,可以用来构建Web应用程序。 Node.js的mime库 Node.js的mime库是用于根据文件扩展名获取对应的MIME类型

    2024年02月19日
    浏览(52)
  • SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月11日
    浏览(60)
  • node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查

    大家好,我是yma16,本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。 技术选型 前端:vite+vue3+antd 后端:node koa 数据库:mysql koa是一个现代的Node.js框架,可以用来构建Web应用程序。 Vue.js 是一款用于构建用户界面的开源JavaScript框架。Vue.js 3 是 Vu

    2024年02月20日
    浏览(38)
  • 通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南(三更)

    阿里云服务器-FinalShell-宝塔面板。 近期需要将自己的一个SpringBoot+Vue前后端分离项目,并且是分模块开发的项目部署到服务器上,记录一下踩坑的地方,结合C站大佬的解决方案,循循善诱一步步部署到服务器上,简单,快速! 购买服务器,阿里云,腾讯云,华为云等,24周岁

    2024年02月03日
    浏览(59)
  • 【项目案例】前后端分离项目 【Web图书管理系统 】SpringBoot + Vue + Element UI + Mysql

    👉 博主介绍 : 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 Java知识图谱点击链接: 体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收藏关注下 , 不然下次找不到哟

    2024年02月07日
    浏览(48)
  • 【项目实战】手把手教你搭建前后端分离项目 SpringBoot + Vue + Element UI + Mysql

    👉 博主介绍 : 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO TOP红人 Java知识图谱点击链接: 体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收藏关注下 , 不然下次找不到哟

    2024年02月16日
    浏览(52)
  • 【Docker】docker部署springboot+vue+mysql+nginx前后端分离项目【部署实战篇】

    安装docker: https://blog.csdn.net/qq_39900031/article/details/121666892 springboot-vue前后端分离项目:https://gitee.com/ma-haojie/springboot-vue-demo.git https://jackwei.blog.csdn.net/article/details/110227719 或者 --restart=always 参数能够使我们 在重启docker时,自动启动相关容器 。 Docker容器的重启策略如下: no,默认

    2024年02月13日
    浏览(45)
  • 【项目案例】前后端分离项目 【中小企业办公自动化管理系统 】SpringBoot + Vue + Element UI + Mysql

    👉 博主介绍 : 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 Java知识图谱点击链接: 体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收藏关注下 , 不然下次找不到哟

    2024年02月14日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包