菜鸟学习----前端vue.js学习01

菜鸟学习----前端vue.js学习01
项目使用vue.js脚手架，构建项目
1.vue.js构建登录框

登录框架构使用element ui Tabs 标签页,构建基础样式。用户登录，二维码查询，编号查询分别对应三个组件，整个Tabs 标签页是一个组件。组件之间可以相互通信，父子组件之间也可以相互通信。
a:element ui Tabs 标签页应用组件如下：

<template><div class="backgrond"><div class="login-form"><el-tabs class="login-form-mian"><el-tab-pane><span slot="label" class="login-title"><i class="el-icon-s-custom"></i> 用户登录</span><login-user></login-user></el-tab-pane><el-tab-pane><span slot="label" class="login-title"><i class="el-icon-picture"></i> 二维码查询</span><rwm-cx></rwm-cx></el-tab-pane><el-tab-pane><span slot="label" class="login-title"><i class="el-icon-s-tools"></i> 编号查询</span><bhd-cx></bhd-cx></el-tab-pane></el-tabs></div><rwm-tk></rwm-tk><sxq-tk></sxq-tk></div>
</template>
<script>
//引用组件js
import LoginUser from  '@/components/Login/loginUser.vue';
import RwmCx from  '@/components/Login/rwm.vue';
import BhdCx from  '@/components/Login/bhcx.vue';
import RwmTk from  '@/components/Login/rwmtk.vue';
import SxqTk from  '@/components/Login/sxqtk.vue';
export default {//使用组件components: {LoginUser,RwmCx,BhdCx,RwmTk,SxqTk},data() {return {};}
};
</script>
<style scoped>
.backgrond {position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;right: 0px;background: url("../../assets/ahsy.png");
}
.login-form {width: 450px;height: 350px;/* 上下间隙160px，左右自动居中 */margin: 300px 200px;background-color: rgb(255, 255, 255, 0.8);padding: 28px;border-radius: 10px;
}
.login-form-mian {width: 400px;height: 300px;background-color: rgba(255, 255, 255, 0.801);padding: 25px;border-radius: 10px;
}
.login-title {font-size: 18px;
}
</style>

2.用户登录组件功能实现

<template><div><el-form :rules="rules" ref="loginUserform" :model="form" label-width="80px" class="login-form"><el-form-item label="账号" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password" ></el-input></el-form-item><el-form-item><el-button class="login-botton" type="primary" @click="submitForm('loginUserform')">登录</el-button></el-form-item></el-form></div>
</template>
<script>
import { login, gettoken } from "@/api/login"; //导入非默认成员方法，下面可以直接调用
export default {data() {return {form: {username: "",password: ""},rules: {username: [{ required: true, message: "账号不能为空", trigger: "blur" }],password: [{ required: true, message: "密码不能为空", trigger: "blur" }]}};},methods: {submitForm(loginUserform) {//提交前验证this.$refs[loginUserform].validate(valid => {//如果valid等于true验证成功if (valid) {//运行方法到后台login(this.form.username, this.form.password).then(response => {const resp = response.data;if (resp.flag) {gettoken(resp.data.token).then(response => {const resps = response.data;if (resps.flag) {//1.保存token,用户信息,保存到浏览器中，在Application中的Storage可以看到localStorage.setItem("mgx-msm-user",JSON.stringify(resps.data)); //转化为json格式localStorage.setItem("mgx-msm-token", resp.data.token);this.$message({message: "登录成功",type: "success"});//前往首页,路由this.$router.push("/home");} else {this.$message({message: resps.message,type: "warning"});}});}else {this.$message({message: resp.message,type: "warning"});}});}else {this.$message({message: "登录失败",type: "warning"});}});}}
};
</script>
<style scoped>
.login-form {width: 300px;/* 上下间隙160px，左右自动居中 */padding: 20px;
}
.login-botton {width: 220px;
}
</style>

3.二维码查询组件实现

<template><div><el-form :rules="rules" ref="rwmform" :model="form" label-width="85px" class="login-form"><el-form-item label="二维码号" prop="rwm"><el-input v-model="form.rwm"></el-input></el-form-item><el-form-item><el-button class="login-botton" type="primary" @click="submitForm('rwmform')">查询</el-button></el-form-item></el-form></div>
</template>
<script>
import { rwmyz } from "@/api/rwmcx"; //导入非默认成员方法，下面可以直接调用
export default {data() {var rwms = (rule, value, callback) => {if (value === "") {callback(new Error("请输入溯源码"));} else {if (value.length !== 2) {callback(new Error("请溯源码不对"));}else{callback()}}};return {form: {rwm: ""},rules: {rwm: [{ validator: rwms, trigger: "change" }]}};},methods: {submitForm(rwmform) {this.$refs[rwmform].validate(valid => {if (valid) {rwmyz(this.form.rwm).then(response => {const resp={}resp[0]=response.dataresp[1]='true'//获取到二维码信息后,发布消息用于非父子组件间通信PubSub.publish('changeDialogFormVisible',resp)//上面删除的是1条//清空框里面的值this.$refs[rwmform].resetFields();})} else {this.$message({message: "请填写完整",type: "warning"});}});}}
};
</script>
<style scoped>
.login-form {width: 300px;/* 上下间隙160px，左右自动居中 */padding: 20px;
}
.login-botton {width: 220px;
}
</style>

编号查询组件实现

<template><div class="sxqclass"><el-form :rules="rules" :model="form" ref="bhcxform" label-width="80px"><el-form-item label="市区名称" prop="cityname"><el-select@change="selectTrigger(form.cityname)"v-model="form.cityname"class="filter-item"placeholder="请点击选择"><el-optionv-for="option in payTypeOptionsCity":key="option.idcity":label="option.cityname":value="option.idcity"/></el-select></el-form-item><el-form-item label="县区名称" prop="countryname"><el-select@change="selectTriggercountry(form.countryname)"v-model="form.countryname"class="filter-item"placeholder="请点击选择"><el-optionv-for="option in payTypeOptionsCountry":key="option.idcountry":label="option.countryname":value="option.idcountry"/></el-select></el-form-item><el-form-item label="企业名称" prop="qyname"><el-select v-model="form.qyname" class="filter-item" placeholder="请点击选择"><el-optionv-for="option in payTypeOptionsQy":key="option.idqy":label="option.qyname":value="option.idqy"/></el-select></el-form-item><el-form-item><el-button class="login-botton" type="primary" @click="submitForm('bhcxform')">查询</el-button></el-form-item></el-form></div>
</template>
<script>
import Sxq from "@/api/sxq";//调用成员方法
export default {data() {return {form: {cityname: "",countryname: "",qyname: ""},payTypeOptionsCity: [],payTypeOptionsCountry: [],payTypeOptionsQy: [],qydm: "340",rules: {cityname: [{ required: true, message: "请选择市区", trigger: "change" }]}};},created() {this.sj();},methods: {//获取市sj() {Sxq.sj(this.qydm).then(response => {const data = response.data.data.rows;this.payTypeOptionsCity = data;});},//获取县selectTrigger(data1) {if (data1 !== "") {Sxq.xj(data1).then(response => {const data = response.data.data.rows;this.payTypeOptionsCountry = data;});}},//获取企业信息selectTriggercountry(data2) {if (data2 !== "") {Sxq.qy(data2).then(response => {const data = response.data.data.rows;this.payTypeOptionsQy = data;});}},submitForm(bhcxform) {this.$refs[bhcxform].validate(valid => {if (valid) {//提交数据Sxq.sxqtj(this.form.cityname,this.form.countryname,this.form.qyname).then(response => {const resp=response.dataconst respfz={}if(resp.flag){respfz[0]='true'respfz[1]=resp.message//非父组件通信PubSub.publish('sxqtx',respfz)this.$refs[bhcxform].resetFields();}});}});}}
};
</script>
<style scoped>
.login-botton {width: 220px;
}
.sxqclass {padding-left: 40px;padding-left: 20px;
}
</style>

注意：

这两个组件他们引用的地方在主题里面，而调用他们的使用是和他们同一级别的子组件，通过非父子组件之间通信，实现数据的传递，达到显示隐藏的效果
a:RwmTk组件实现代码

<template><div><el-dialog title="二维码查询结果" :visible.sync="dialogFormVisible" width="500px"><el-formstatus-iconref="rwmtkForm":model="pojo"label-width="100px"label-position="right"style="width: 400px;"><el-form-item label="姓名" prop="name"><el-input v-model="pojo.name" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button></div></el-dialog></div>
</template>
<script>
export default {data() {return {pojo: {name: ""},dialogFormVisible: false};},created() {//订阅消息,也就是接受发布消息PubSub.subscribe("changeDialogFormVisible", (event, data) => {if (data[1] == "true") {this.dialogFormVisible = true;this.pojo.name = data[0].data.name;} else {this.$message({message: "查询失败",type: "error"});}});}
};
</script>

b:SxqTk组件实现代码

<template><div><el-dialog title="企业编号查询" :visible.sync="dialogFormVisible" width="500px"><el-formstatus-iconref="rwmtkForm":model="pojo"label-width="100px"label-position="right"style="width: 400px;"><el-form-item label="姓名" prop="name"><el-input v-model="pojo.name" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button></div></el-dialog></div>
</template>
<script>
export default {data() {return {pojo: {name: ""},dialogFormVisible: false};},created() {//订阅消息,也就是接受发布消息PubSub.subscribe("sxqtx", (event, data) => {if (data[0] == "true") {this.dialogFormVisible = true;this.pojo.name = data[1];} else {this.$message({message: "查询失败",type: "error"});}});}
};
</script>

具体里面的方法使用，可以查看element ui官方开发文档，看看如何使用，对于Vue.js的生命周期的使用，和项目后续的
等可以自行查看vue.js文档，里面写的很清楚。代码中用到ajax异步请求，这里面没有显示。作者用的是"axios": “^0.19.0”,进行ajax异步请求。

菜鸟学习----前端vue.js学习01相关推荐

Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
【前端VUE的学习】
起因:最近搞起了java,发现一个个人觉得不错的框架. 连接renren框架包含了常用,和SSM等等,前端使用了vue,所以学习一下. 一.学习准备 1.工具.采用了vscode.据说能写C++,p ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记一
上手前的一些概念为啥要用Vue.js Vue.js 是目前最流行的前端框架之一,专注于视图层,容易上手. 使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定),提高渲染效率, ...
Vue.js学习详细课程系列--共32节（1 / 6）
Vue.js学习课程(1 / 6) 01. 什么是Vue.js? 什么是Vue.js? 官方网站竞争对手技术前提开发工具 02. 从index.html开始知识点 index.html vue ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
Vue.js学习的第一天
Vue.js学习的第一天官网文档地址:传送门一.Vue介绍: 1.Vue.js是什么? 作者:2014年2月,尤雨溪曾就职于Google Creative Labs和Meteor Developm ...
遇见 vue.js --------阿文的vue.js学习笔记（8 —1）------- 列表渲染
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
遇见 vue.js --------阿文的vue.js学习笔记（4）------模板语法
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...

菜鸟学习----前端vue.js学习01

菜鸟学习----前端vue.js学习01相关推荐

最新文章

热门文章