前端技巧培训-后台战友快速入门

一.工具

webstorm/vscode
node环境/npm (一般安装node自带安装npm的)
可以安装淘宝镜像(下载依赖包比较快)
node安装教程
淘宝镜像安装教程
iview 使用版本 2.x
Vue版本2.x
webpack 版本 3.x
本地版本,如下图

二.项目

UMS项目为例,下图简介

1. 环境安装完成,下载对应项目;2. package.json 的这个文件夹下面, npm install3. 找到user.js (路径: src/vuex/modules/user.js)如果是apos用户,找到对应的域名,然后对应的账户,最后这个文件不要提交(如下图)4. npm run dev 启动项目

三.常用Vue指令


创建一个hello.vue文件
模板如下:<template><div class="template-container">所有内容都写在div里面, 最外层只能有一个div</div>
</template>
<script>
export default {data(){return {msg: "111",items: [{ message: 'Foo' },{ message: 'Bar' }],awesome: true}}
}
</script>
<style lang="less" scope>
.template-container {span{color: #fff;}
}
</style>1.把数据渲染在页面上<span @click="clickFun">Message: {{ msg }}</span>2.更改数据 - 定义一个方法 - 并且绑上点击事件 @clickmethods: {clickFun() {this.msg = "2"}
}3. 循环遍历
<ul id="example-1"><li v-for="(item, index) in items" :key="index">{{ item.message }}</li>
</ul>4.显示隐藏 v-if  v-show  区别: 显示dom元素, 频繁切换推荐用v-show
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1><h1 v-show="awesome">Vue is awesome!</h1>5.写接口,获取数据(找到api文件夹,定义接口)export function changePassword(data){return http({method:"post",url:"/user/update/password",data})
}import { changePassword } from "@/api/auth"methods: {submit(){let data = Object.assign({}, this. form)changePassword(data).then(res => {})}}6.列表页布局方式, 引入公共的布局组件,填入插槽import { LayoutList } from "@/components/layout"components: {LayoutList},<layout-list><template slot="form">存放搜索表单</template><template slot="tool-left">存放表单下面左边按钮     </template><template slot="table">存放表格内容</template><template slot="page">存放分页内容</template>
</<layout-list>7.获取表格数据// 查询按钮,每次点击查询, 页面页数都得设置为 1<Button type="primary" @click="loadTableData(true)">查询</Button>// 页面表格展示// height 计算值是通过 mixin 计算,所以 class 类名需要一致,不能更改
<Tableborder:data="table.data":columns="table.columns":height="$_layout.tableHeight":loading="table.loading"
></Table>//引入接口
import {fetchBusinessFunctionList
} from "@/api/admin/application-manage/business-function-manage";// 数据定义
data(){return {table:{loading: false,columns:[{...}],data:[]}}
},
// 在这个生命周期调取接口
created() {// 渲染页面的时候就开始获取列表数据接口this.loadTableData();
},methods: {// reload默认为false, 如果为true, 则页数设置为1loadTableData(reload = false) {this.table.loading = true;reload && (this.pagination.pageNum = 1);fetchBusinessFunctionList(this.pagination, this.form).then(response => {this.table.data = response.data.list;this.pagination.total = response.data.total;this.table.loading = false;}).catch(error => {this.table.loading = false;});}
}    8. 使用iview UI框架组件例如使用iview form表单.进入iview 官网,选择对应的组件9. 表单验证<Button type="primary" @click="handleSubmit">保存</Button>
<Button  @click="handleReset('formValidate')">重置</Button>// iview form表单
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"><FormItem label="Name" prop="name"><Input v-model="formValidate.name"></Input></FormItem>
</Form>data (){return {formValidate: {name: ""},// 验证规则ruleValidate: {name: [{ required: true, message: 'The name cannot be empty', trigger: 'blur' }]}}
},methods: {// 保存handleSubmit (name) {// 先验证this.$refs[name].validate((valid) => {if (valid) {// 验证规则成功, 调取里面方法}})},// 重置按钮handleReset (name) {// 这个方法需要配置 prop 参数this.$refs[name].resetFields();}
}10. input输入框使用键盘事件<Input v-model="value2" @on-enter="事件名称"></Input>

四.上传代码

推到自己分支, 提交合并请求,交给战友合并.

前端技巧培训-后台战友快速入门相关推荐

好程序员Java培训分享如何快速入门Java编程
好程序员Java培训分享如何快速入门Java编程,作为老牌编程语言,Java拥有广阔的市场应用,企业对Java人才的需求一直居高不下.有很多非专业.零基础的人想要学习Java却不知道怎么快速入门,接下 ...
华为云14天鸿蒙设备开发培训Day3：快速入门
目录华为云14天鸿蒙设备开发培训Day3:快速入门 OpenHarmony快速入门:Hello_World 添加Hello_World源码文件编写Hello_World业务代码编写编译构建文件B ...
ZBrush实战操作中的16个技巧，方便新手快速入门
刚接触ZBrush软件的朋友,总会在实践中遇到这样或那样的问题,本文将对ZBrush常见问题(十六个)做一个总结,以便新手朋友能快速入门. 1. 介绍 ZBrush保存时是一个画面,要保持三维物体的可 ...
前端新手教程！如何快速入门web前端
最近收到一些的私信问我,自己想要学习前端,该如何学习?学习到什么程度才可以工作?我进入这个行业已经十一年了,面试过不少人,在企业里也带过不少新人和应届生.所以这篇文章我想分享一些初学者应该怎么学web ...
python后台Flask 快速入门
全栈工程师开发手册 (作者:栾鹏) 架构系列文章在python web框架的世界里充满了选择.有Django,Flask,Pyramid,Tornado,Bottle,Diesel,Pecan,Fa ...
前端开发神器：grunt快速入门
2019独角兽企业重金招聘Python工程师标准>>> grunt是什么? grunt是一个基于nodejs的task runner,简单来说,就是类似于.net平台的msbuild ...
不会CAD制图怎么办？掌握这几个CAD技巧，新手也能快速入门
不会CAD制图怎么办?掌握这几个CAD技巧,新手也能快速入门每当我们看到CAD大神,分分钟就能设计出一张图纸,是多么的崇拜,如果你现在只是一个新手,那么掌握下面这几个CAD技巧,也能让你快速入门. ...
java如何快速入门及虚拟主机能装java吗？[图]
一.java如何快速入门? 下面是一些可能帮助您成长为Java开发人员并获得更多关于该语言的知识的技巧. java如何快速入门正确掌握Java的基本知识由于Java为开发人员提供了如此多的特性和选 ...
python制作客户端软件_python 实现 PC 客户端自动化快速入门：pywinauto ！
一.前言我们柠檬班的小可爱,在学完我们柠檬班自动化的课程之后,就掌握了接口自动化,web自动化,app自动化,这些工作中常用的自动化技能,在工作足以够应对90%以上的自动化需求了.不过近期也有部 ...

前端技巧培训-后台战友快速入门

前端技巧培训-后台战友快速入门

一.工具

二.项目

三.常用Vue指令

四.上传代码

前端技巧培训-后台战友快速入门相关推荐

最新文章

热门文章