阶段七-es6 项目操作

303 阅读3分钟

一:领导要做的:

1.1 创建仓库
1.2 创建分支
1.3 初始化项目 ===> 搭建目录结构

执行以下操作:

1:登录gitee 创建一个仓库
2:在本地把仓库克隆下来:
    git clone https://gitee.com/zhu12/es6.git
3:cd 进入到克隆的仓库目录,查看远程仓库:git branch -r,可以看到只有一个mast分支
4:创建一个dev分支:git branch develop
5:提交分支到远程仓库:git push --set-upstream origin develop ,查看远程分支git branch -r,已经添加上这个分支
6:切换到新建的分支:git checkout develop ,查看当前分支:git branch 
7:再分支上创建功能模块:git branch feature/login,
8:提功能分支到远程仓库:git push --set-upstream origin feature/login

创建前端项目:首先退出克隆的项目目录,然后项目名称要跟克隆的项目一致:vue create 项目名称,记得选择:merge选项

创建后端项目:
退出项目名称目录,全局安装:npm install express-generator -g
局部安装:先cd进入到克隆下来的项目,然后执行命令安装: express --view=ejs server
进入项目:cd server
安装依赖:npm install
启动项目:npm run start
访问后端项目:http://localhost:3000/

将创建好的前端项目提交到远程分支下:
   进入到克隆下来的项目目录,切换到要提交的分支下:git checkout develop  
     添加项目到本地:git add . 
     提交项目到暂存区:git commit -m 'init'
    提交项目到远程仓库:git push ,到gitee可以看到分支:develop 下有刚刚提交的内容,所有员工进行开发就从这个分支克隆项目进行开发。领导的事到这就做完了


二:开发要做的事:

2.1 克隆代码到本地
        下载仓库中指定分支的代码
        git clone -b <分支名称> <分支地址>

2.2 进入到克隆的项目 查看本地配置:git config -l
    配置本地的用户名和邮箱
    git config user.name '用户名' 
    git config user.email '邮箱' 
2.3 查看本地分支:git branch,查看远程分支:git branch -r
    本地切换到远程分支下:    git checkout -b <分支名称>
    切换到分支:(注意不要把:origin/feature/login整个切换,切换的分支名是:feature/login )

image.png

2.4: login文件夹是空的,所以你找不到,自己是手动新建一个
2.5: 写完代码,提交,先把node_models 模块删掉 再提交,git add.  这时候可能遇到问题,自己根据提示处理一下

image.png

2.6 提交代码到暂存区:git commit -m 'login_v1.0'

2.7 将分支提交到远程分支:  git push --set-upstream origin feature/login 这时候就可以可以再远程仓库查看到已提交的代码

三:项目视频考核:

 这次主要是用ES6 做了一个 登录模块:
首先  从gitee 上通过分支名clone拉取代码 ,进入到项目做本地配置用户名 和密码
切换到分支  git checkout -b <分支名称>,
在login文件夹中分别创建
render 页面渲染文件:创建一个模板让页面渲染出登录和用户密码输入框。
 init 初始化文件:声明提示信息对象 和 调用渲染数据函数,以及调用相关事件的函数,通过export default 导出一个login ,
event事件处理文件,在这个文件中 首先获取到用户名 密码 和登录 dom节点,对登录dom绑定click事件,使用asyncawait 来修饰模拟的请求事件,获取到 用户名和密码。

在 api文件夹中 创建 ajaxData 请求文件,通过fetch 请求模拟数据。
在src目录中创建一个api文件,里面新建fetchMokc .js文件,使用fetchMock.mock模拟后端返回的数据,判断用户登录名称和密码是否正常,做出相应的提示