vue项目第一阶段

###今日目标
1.初始化项目
2.基于Vue技术栈进行项目开发
3.使用Vue的第三方组件进行项目开发
4.理解前后端分离开发模式

###1.电商业务概述
客户使用的业务服务:PC端,小程序,移动web,移动app
管理员使用的业务服务:PC后台管理端。
PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理(商品分类,分类参数,商品信息,订单),数据统计
电商后台管理系统采用前后端分离的开发模式
前端项目是基于Vue的SPA(单页应用程序)项目

前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
后端技术栈:Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)

###2.项目初始化
A.安装Vue脚手架
B.通过脚手架创建项目
C.配置路由
D.配置Element-UI:在插件中安装,搜索vue-cli-plugin-element
E.配置Axios:在依赖中安装,搜索axios(运行依赖)
F.初始化git仓库
G.将本地项目托管到github或者码云中

###3.码云相关操作
A.注册登录码云账号
在这里插入图片描述

B.安装git
在Windows上使用Git,可以从Git官网直接下载安装程序进行安装。
测试命令:git --version

C.点击网站右上角“登录”,登录码云,并进行账号设置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAm2pSdW-1572050740909)(images/码云点击设置.jpg)]

D.在本地创建公钥:在终端运行:ssh-keygen -t rsa -C “xxx@xxx.com”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-61fo2sTI-1572050740913)(images/创建公钥.jpg)]
E.找到公钥地址:
Your identification has been saved in /c/Users/My/.ssh/id_rsa.
Your public key has been saved in /c/Users/My/.ssh/id_rsa.pub.
当我们创建公钥完毕之后,请注意打印出来的信息“Your public key has been saved in”
/c/Users/My/.ssh/id_rsa.pub : c盘下面的Users下面的My下面的.ssh下面的id_rsa.pub就是我们创建好的公钥了

E.打开id_rsa.pub文件,复制文件中的所有代码,点击码云中的SSH公钥,将生成的公钥复制到公钥中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YILhh45p-1572050740915)(images/pub文件.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXdlpcoO-1572050740918)(images/ssh公钥.jpg)]
G.测试公钥:打开终端,输入命令
ssh -T git@gitee.com
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B1JFMVz5-1572050740920)(images/success.jpg)]

H.将本地代码托管到码云中
点击码云右上角的+号->新建仓库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hnXApDe8-1572050740922)(images/新建仓库.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlQbomFN-1572050740924)(images/创建仓库2.jpg)]

I.进行git配置:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4eguWJsF-1572050740926)(images/config.jpg)]
打开项目所在位置的终端,进行git仓库关联
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7H9xiyE-1572050740929)(images/项目终端执行关联.jpg)]

###4.配置后台项目
A.安装phpStudy并导入mysql数据库数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nQXj4PI-1572050740931)(images/phpStudy.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CMwtuIUU-1572050740934)(images/mysql.jpg)]
B.安装nodeJS,配置后台项目,从终端打开后台项目vue_api_server
然后在终端中输入命令安装项目依赖包:npm install

C.使用postman测试api接口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WgOCWOh3-1572050740937)(images/postman.jpg)]

###5.实现登录功能
A.登录状态保持

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值