迈出全栈第一步,vue+node+mysql独立完成前后端分离的增 ... | vue mysql
写在前面本文只是本人学习过程的一个记录,并不是什么非常严谨的教程,希望和大家一起共同进步。也希望大家能指出我的问题。适合有一定基础,志在全栈的前端初学者学习,从点击按钮提交ajax到获得服务器response,然后更新页面,这其中到底发生了什么?下面我们就来实现一个小demo,以前后端分离的方式独立跑通一个简单的增删改查流程,迈出全栈第一步。用到的一些技术栈数据库:mysqlmysqlfront(数据库gui工具)后端:nodeexpressmysqljs(node数据库模块)前端:vue(mvvm框架)elment-ui(快速搭建前端页面)axios(ajax)webpack(构建工具)...
写在前面本文只是本人学习过程的一个记录,并不是什么非常严谨的教程,希望和大家一起共同进步。也希望大家能指出我的问题。适合有一定基础,志在全栈的前端初学者学习,从点击按钮提交ajax到获得服务器response,然后更新页面,这其中到底发生了什么?下面我们就来实现一个小demo,以前后端分离的方式独立跑通一个简单的增删改查流程,迈出全栈第一步。
用到的一些技术栈
数据库:mysql mysqlfront(数据库gui工具) 后端:node express mysqljs(node数据库模块) 前端: vue(mvvm框架) elment-ui(快速搭建前端页面) axios(ajax) webpack(构建工具)后端负责提供接口,操作数据库提供前端所需的数据和状态。前端负责调用接口,将数据展示给用户,并对用户的一些操作转发给后端处理。数据库当然是负责存储数据啦,关于数据库,网上很多教程都是使用mongodb,通过mongoose操作mongdb的确比mysql便捷很多,不过实际工作中还是使用mysql的多,技术还是得回归实际应用才能体现出价值。
本demo使用node创建本地服务器,在localhost就能完成全部流程,并不需要线上服务器。虽然功能非常简单,但是用的的模块和工具还是蛮多的,建议大家把注意力放在从前到后的这个流程上,一些工具和库的使用我也不详细介绍了,大家自己google,要成为全栈这点学习能力还是要有的。
项目结构先上github仓库地址[1]吧
大致介绍下项目结构,前后端在不同的文件夹下面,互不影响。前端使用webpack构建,利用webpack-dev-server开发,前端入口是localhost:8888/dist/index.html。后端使用express框架,利用nodemon自动重启,主机是localhost:9999。使用webpack-dev-server和express分别创建了两个服务器,用同一个端口会冲突,so这里会有跨域问题,不过用devserver可以轻松解决,后面会说到具体解决办法。如果是线上服务器的话放一个里面就行了。
先从前端开始首先用vue-cli生成项目模板就行了,用webpack-simple就够了...