前端
1、element框架官网:链接
作用:写前端的框架
安装
npm i element-ui -S
man.js注册
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
2、express框架官网:链接
作用:主要写在js文件,实现将本地 图片等文件传到服务器端
安装
npm install express --save
start.js代码
const express=require('express'); const httpServer=new express(); const banner=require('./config/banner.json'); const shopitem=require('./config/shopitem.json'); httpServer.use(express.static("resource")); httpServer.all("*",function(req,res,next){ res.header("Access-Control-Allow-Origin","*"); next(); }) httpServer.get('/getBannerImg',function(req,res){ //打包发送到服务器 res.send({code:0,message:banner}) }); httpServer.get('/getShopItem',function(req,res){ //打包发送到服务器 res.send({code:0,message:shopitem}) }); httpServer.get('/',function(req,res){ res.send('helloword1') }); httpServer.listen(9999);//设置端口号
工程截图
3、axios框架官网:链接
作用:用于vue文件的连接服务器的框架
安装
npm install axios
main.js配置
const axios=require('axios'); Vue.prototype.$axios=axios;
4.mangoDB 链接
作用:基于分布式文件存储的数据库
这里我们用Studio 3T 编辑我们的MangoDB数据库
启动mangoDB:
C:\mongodb\bin\mongod --dbpath c:\data\db
一定要在mangodb安装目录的bin路径运行
mongod --dbpath C:\data\db
这个C:\data\db 就是你想让这个数据保存在哪个文件下的路径,可以自定义路径
这个自定义路径最好放在跟MangoDB一个文件下 比如 D:\MongoDB\data\db
启动成功:
5、cmd创建带有 路由router的vue项目
1、进入你想要项目文件的地址 在地址框上输入cmd 运行
2、vue create 项目名 (注意项目名不能有大写)
3、接着选择manually select feature
4、用空格进行选择 选择Bable Router 其他的取消选择
5、选择n
6、选择package.json
7、选择y