一个用vue写的小网站 过程梳理 一些记录
来源:互联网 发布:经传软件骗局2016 编辑:程序博客网 时间:2024/06/08 08:35
先看实现后的效果:
支付成功后跳转到订单列表页面:
项目目录
把导航和底部的内容layout.vue作为跟组件
先完成导航部分的制作,包括登录弹窗的显示,其中涉及到的有layout、dialog、logForm.vue
//layout.vue
<template> <div> <div class="app-head"> <div class="app-head-inner"> <router-link :to="{path: '/'}"> <img src="../assets/logo.png"> </router-link> <div class="head-nav"> <ul class="nav-list"> <li>{{ username }}</li> <li v-if="username === ''" @click="logClick">登录</li> <li class="nav-pile">|</li> <li v-if="username === ''" @click="regClick">注册</li> <li v-if="username !== ''" @click="">退出</li> <li class="nav-pile">|</li> <li @click="aboutClick">关于</li> </ul> </div> </div> </div> <div class="app-content"> <keep-alive> <router-view></router-view> </keep-alive> </div> <div class="app-foot"> <p>© 2016 fishenal MIT</p> </div> <my-dialog :is-show="isShowAboutDialog" @on-close="closeDialog('isShowAboutDialog')"> <p>本报告在调研数据的基础上,采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、 用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等,通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、 准确地反映中国专车市场发展情况,为政府、企事业单位和社会各界提供决策依据。 </p> </my-dialog> <my-dialog :is-show="isShowLogDialog" @on-close="closeDialog('isShowLogDialog')"> <log-form @has-log="onSuccessLog"></log-form> </my-dialog> <my-dialog :is-show="isShowRegDialog" @on-close="closeDialog('isShowRegDialog')"> <reg-form></reg-form> </my-dialog> </div></template><script> import Dialog from './base/dialog.vue' import LogForm from './logForm.vue' import RegForm from './regForm.vue'export default { components: { MyDialog: Dialog, LogForm, RegForm }, data () { return { isShowAboutDialog: false, isShowLogDialog: false, isShowRegDialog: false, username: '' } }, methods: { aboutClick() { this.isShowAboutDialog = true; }, logClick(){ this.isShowLogDialog = true; }, regClick(){ this.isShowRegDialog = true; }, closeDialog(attr){ this[attr] = false; }, onSuccessLog(data){ this.closeDialog('isShowLogDialog'); this.username = data.username; } }}</script>//logForm
<template> <div class="login-form"> <div class="g-form"> <div class="g-form-line"> <span class="g-form-label">用户名:</span> <div class="g-form-input"> <input type="text" v-model="usernameModel" placeholder="请输入用户名"> </div> <span class="g-form-error">{{userErrors.errorText}}</span> </div> <div class="g-form-line"> <span class="g-form-label">密码:</span> <div class="g-form-input"> <input type="password" v-model="passwordModel" placeholder="请输入密码"> </div> <span class="g-form-error">{{passwordErrors.errorText}}</span> </div> <div class="g-form-line"> <div class="g-form-btn"> <a class="button" @click="onLogin">登录</a> </div> </div> </div> </div></template><script> export default{ data () { return { usernameModel: '', passwordModel: '' } }, methods: { onLogin() { if(!this.userErrors.status || !this.passwordErrors.status){ alert("请重新输入"); }else{ console.log(this.usernameModel, this.passwordModel); this.$http.get('api/login').then(function (res) { console.log(res.data); this.$emit('has-log', res.data); }, function (error) { console.log(error); }) } } }, computed: { userErrors() { let errorText, status; if( !/@/g.test(this.usernameModel) ){ status = false; errorText = '不包含@'; }else { status = true; errorText = ''; } if(!this.userFlag){ errorText=''; this.userFlag = true; } return{ status, errorText } }, passwordErrors () { let errorText, status; if( !/^\w{1,6}$/g.test(this.passwordModel) ){ status = false; errorText = '密码不是1-6位'; }else { status = true; errorText = ''; } if(!this.passwordFlag){ errorText=''; this.passwordFlag = true; } return{ status, errorText } } } }</script>//dialog
http://blog.csdn.net/xidongdong1/article/details/78666709
这样完成了导航及登录功能
然后是网站首页 新建目录pages/index.vue
<template></template>内渲染内容、引入幻灯片内容省略
<script>/*引入幻灯片组件*/import slideShow from '../components/slideShow'export default { components: { slideShow }, /*一般可以在created函数中调用ajax获取页面初始化所需的数据*/ created: function () { this.$http.get('api/getNewsList') .then(function (res) { this.newsList = res.data }, function (err) { console.log(err); } ) }, data () { return { ... } }}</script>幻灯片组件http://blog.csdn.net/xidongdong1/article/details/78396067
这样首页的内容完成,点击幻灯片图片跳转到/detail
detail.vue分左右两块,右侧实现了子路由
<template> <div class="detail-wrap"> <div class="detail-left"> <div class="product-board"> <img :src="productIcon"> <ul> <!--<li v-for="item in products">{{item.name}}</li>--> <router-link v-for="item in products" :key="item.id" :to="{ path: item.path }" tag="li" active-class="active"> {{ item.name }} </router-link> </ul> </div> </div> <div class="detail-right"> <keep-alive> <router-view></router-view> </keep-alive> </div> </div></template>
前面忘记放路由的配置代码,代码中可看到父子路由的写法,如下:
let router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: IndexPage }, { path: '/detail', component: DetailPage, redirect: '/detail/count', children: [ { path: 'publish', component: DetailpubPage }, { path: 'analysis', component: DetailanaPage }, { path: 'count', component: DetailcouPage }, { path: 'forecast', component: DetailforPage } ] }, { path: '/orderList', component: OrderListPage } ]});将path放到数据products内,遍历左侧列表,点击跳转到相应路由
data () { return { products: [ { name: '数据统计', path: 'count', icon: require('../assets/images/1.png'), active: false }, { name: '数据预测', path: 'forecast', active: false }, { name: '流量分析', path: 'analysis', active: false }, { name: '广告发布', path: 'publish', active: false } ], ... }},分析detail/analysis.vue作为例子
效果图在最前面第二张,流量分析内容,这里引用了很多小组件,这些小组件我也有总结起来,传送门http://blog.csdn.net/xidongdong1/article/details/78669908
<template> <div class="sales-board"> <div class="sales-board-intro"> ... <div class="sales-board-form"> <div class="sales-board-line"> <div class="sales-board-line-left"> 购买数量: </div> <div class="sales-board-line-right"> <v-counter @on-change="onParamChange('buyNum', $event)"></v-counter> </div> </div> <div class="sales-board-line"> <div class="sales-board-line-left"> 产品类型: </div> <div class="sales-board-line-right"> <v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)"></v-selection> </div> </div> <div class="sales-board-line"> <div class="sales-board-line-left"> 有效时间: </div> <div class="sales-board-line-right"> <v-chooser :selections="periodList" @on-change="onParamChange('period', $event)"></v-chooser> </div> </div> <div class="sales-board-line"> <div class="sales-board-line-left"> 产品版本: </div> <div class="sales-board-line-right"> <v-mul-chooser :selections="versionList" @on-change="onParamChange('versions', $event)"></v-mul-chooser> </div> </div> <div class="sales-board-line"> <div class="sales-board-line-left"> 总价: </div> <div class="sales-board-line-right"> {{ price }} 元 </div> </div> <div class="sales-board-line"> <div class="sales-board-line-left"> </div> <div class="sales-board-line-right"> <div class="button" @click="showPayDialog"> 立即购买 </div> </div> </div> </div> <div class="sales-board-des"> ... </div>
阅读全文
0 0
- 一个用vue写的小网站 过程梳理 一些记录
- 关于Vue的一些小用法(记录)
- 写了一个小的网站困惑
- 用存储过程写的一个小递归程序
- Vue.js写一个SPA登录页面的过程
- Vue中使用set方法过程的一个小发现
- Vue中使用set方法过程的一个小发现
- 使用vue-cli构建vue工程,及一些小坑的记录
- 写代码过程中一些优化的小技巧。
- Nhibernate使用过程中记录的一些小知识
- 记录Vue的一些简单的使用
- 用c/c++语言写的一个小的“爬虫”程序学习过程总结
- 记录开发过程中的一些小问题
- vue +bootstrap 写的小例子
- 关于Vue生命周期的一些理解记录
- 写程序的一些记录
- vue使用过程常见的一些问题
- 准备写的小网站
- web.xml中的security-constraint
- spring boot项目搭建 发布 打包弯路全纪录
- 5.7及以上版本的MySQL下载、安装及配置教程
- TCP Fluid Model
- Linux下/etc目录详解
- 一个用vue写的小网站 过程梳理 一些记录
- Handler消息处理机制
- windows 下配置 Nginx 常见问题
- 一种简单的防止重复点击的工具类
- IntelliJ IDEA 学习笔记
- Ant 的最完整build.xml(转)
- AUC的计算方法
- RNN-LSTM循环神经网络-03Tensorflow进阶实现
- centos7中使用keepalived做双机热备+负载均衡