建设网站就选用什么样的公司,高仿酒网站怎么做,怎么做广告图片设计,网站开发php是什么意思一、项目效果图
1.首页 2.登录 版本2#xff1a;
3.注册 4.找回密码 5.立即下单 6.商品详情 7.个人中心-工作台 8.个人中心-订单列表 9.订单中心-包裹列表 10.个人中心-工单管理 11.我的钱包 12.实名认证 13.升级vip 14.个人中心-推广赚钱 二、关键源码
1.路由配置
impor…一、项目效果图
1.首页 2.登录 版本2
3.注册 4.找回密码 5.立即下单 6.商品详情 7.个人中心-工作台 8.个人中心-订单列表 9.订单中心-包裹列表 10.个人中心-工单管理 11.我的钱包 12.实名认证 13.升级vip 14.个人中心-推广赚钱 二、关键源码
1.路由配置
import Vue from vue
import Router from vue-router
import Layout from /components/index/index
Vue.use(Router)export const constantRoutes [{path: /index,component: Layout,children: [{path: ,name: 主页,component: () import( /* webpackChunkName: views */ /views/home/index),}]},{path: /,name: 主页,redirect: /index},{path: /type,component: Layout,children: [{path: ,name: 分类,component: () import( /* webpackChunkName: views */ /views/type/index),}]},{path: /productDetail,component: Layout,children: [{path: ,name: 商品详情,component: () import( /* webpackChunkName: views */ /views/product_detail/index),}]},{path: /personal,component: Layout,redirect: /personal/staging,children: [{path: staging,name: 个人中心,component: () import( /* webpackChunkName: views */ /views/personal/index),redirect: /personal/staging,children:[{path: /personal/staging,name: 工作台,component: () import( /views/personal/staging.vue)},{path: /personal/order,name: 订单列表,component: () import( /views/personal/order.vue)},{path: /personal/package,name: 包裹列表,component: () import( /views/personal/package.vue)},{path: /personal/merchant,name: 工单管理,component: () import( /views/personal/merchant.vue)},{path: /personal/myWallet,name: 我的钱包,component: () import( /views/personal/my_wallet.vue)},{path: /personal/auth,name: 实名认证,component: () import( /views/personal/auth.vue)},{path: /personal/vip,name: 升级VIP,component: () import( /views/personal/vip.vue)},{path: /personal/popMoney,name: 推广赚钱,component: () import( /views/personal/pop_money.vue)}]}]},];const createRouter () new Router({// mode: history, // require service supportscrollBehavior: () ({y: 0}),routes: constantRoutes
})const router createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {const newRouter createRouter()router.matcher newRouter.matcher // reset router
}export default router
2.登录注册窗口
templatediv!-- 登录弹窗 --el-dialogclassform-dialogtitle:visible.syncboxwidth500px:close-on-click-modalfalsecenterdivdiv v-showmodalType forget classform-title 找回密码 /divdiv classtabs-groupa :classtab-link el-link el-link--danger (modalType login?active:) clickchangeModalType(login)!----span classel-link--inner 登录 /span!----/adiv classtab-divider el-divider el-divider--vertical!----/diva :classtab-link el-link el-link--danger (modalType register?active:) clickchangeModalType(register)!----span classel-link--inner 注册 /span!----/a/divel-form v-showmodalType login classlogin-formstatus-icon:rulesloginRulesrefloginForm:modelloginFormlabel-width0el-form-item propphoneel-input sizesmallv-modelloginForm.phoneauto-completeoffplaceholder请输入您的手机号i slotprefix classel-icon-user el-icon--right//el-input/el-form-itemel-form-item proppassword v-showloginType pwdel-input sizesmall:typepasswordTypev-modelloginForm.passwordauto-completeoffplaceholder请输入您的密码i classel-icon-view el-input__icon slotsuffix clickshowPassword/i slotprefix classel-icon-lock el-icon--right//el-input/el-form-itemel-form-item propvalidCode v-showloginType codeel-input sizesmall placeholder请输入验证码 v-modelloginForm.validCode classinput-with-selecti slotprefix classel-icon-user el-icon--right styleline-height: 32px;/el-button slotappend clicksendValidCode发送验证码/el-button/el-input/el-form-itemel-form-itemel-row :span24el-col :span12el-checkbox v-showloginType pwd v-modelloginForm.autoLogin保存密码/el-checkbox/el-colel-col :spanloginType pwd?12:24 styletext-align: right;el-button typetextstylewidth: 100px;color: #606266;click.native.preventchangeModalType(forget)classlogin-submit忘记密码/el-button/el-col/el-rowel-row :span24el-col :span24 styletext-align: right;el-button typeprimarystylewidth: 100%;height: 40px;click.native.preventhandleLoginclasslogin-submit登录/el-button/el-col/el-row/el-form-item/el-formel-form v-showmodalType register classlogin-formstatus-icon:rulesregisterRulesrefregisterForm:modelregisterFormlabel-width0el-form-item propphoneel-input sizesmallv-modelregisterForm.phoneauto-completeoffplaceholder请输入您的手机号i slotprefix classel-icon-user el-icon--right//el-input/el-form-itemel-form-item propvalidCodeel-input sizesmall placeholder请输入验证码 v-modelregisterForm.validCode classinput-with-selecti slotprefix classel-icon-user el-icon--right styleline-height: 32px;/el-button slotappend clicksendValidCode发送验证码/el-button/el-input/el-form-itemel-form-item proppasswordel-input sizesmall:typepasswordTypev-modelregisterForm.passwordauto-completeoffplaceholder6-20位密码i classel-icon-view el-input__icon slotsuffix clickshowPassword/i slotprefix classel-icon-lock el-icon--right//el-input/el-form-itemel-form-item proppasswordConfirmel-input sizesmall:typepasswordTypev-modelregisterForm.passwordConfirmauto-completeoffplaceholder请输入确认密码i classel-icon-view el-input__icon slotsuffix clickshowPassword/i slotprefix classel-icon-lock el-icon--right//el-input/el-form-itemel-form-itemel-row :span24el-col :span24 styletext-align: right;el-button typeprimarystylewidth: 100%;height: 40px;click.native.preventhandleRegisterclasslogin-submit注册/el-button/el-col/el-row/el-form-item/el-formdiv v-showmodalType login || modalType register classlogin-type-changea classel-link el-link--info clickchangeLoginType(pwd)!----span classel-link--inner密码登录/span!----/adiv classel-divider el-divider--vertical!----/diva classel-link el-link--info!----span classel-link--inner clickchangeLoginType(code)验证码登录/span!----/a/divel-form v-showmodalType forget classlogin-formstatus-icon:rulesforgetRulesrefregisterForm:modelforgetFormlabel-width0el-form-item propphoneel-input sizesmallv-modelforgetForm.phoneauto-completeoffplaceholder请输入您的手机号i slotprefix classel-icon-user el-icon--right//el-input/el-form-itemel-form-item propvalidCodeel-input sizesmall placeholder请输入验证码 v-modelforgetForm.validCode classinput-with-selecti slotprefix classel-icon-user el-icon--right styleline-height: 32px;/el-button slotappend clicksendValidCode发送验证码/el-button/el-input/el-form-itemel-form-item proppasswordel-input sizesmall:typepasswordTypev-modelforgetForm.passwordauto-completeoffplaceholder6-20位密码i classel-icon-view el-input__icon slotsuffix clickshowPassword/i slotprefix classel-icon-lock el-icon--right//el-input/el-form-itemel-form-item proppasswordConfirmel-input sizesmall:typepasswordTypev-modelforgetForm.passwordConfirmauto-completeoffplaceholder请输入确认密码i classel-icon-view el-input__icon slotsuffix clickshowPassword/i slotprefix classel-icon-lock el-icon--right//el-input/el-form-itemel-form-itemel-row :span24el-col :span12 styletext-align: left;el-button typetextclickchangeLoginType(pwd)stylewidth: 100px;color: #606266;click.native.preventhandleLoginclasslogin-submit返回登录/el-button/el-col/el-row/el-form-itemel-form-itemel-row :span24el-col :span24 styletext-align: right;el-button typeprimarystylewidth: 100%;height: 40px;click.native.preventhandleForgetclasslogin-submit确认修改/el-button/el-col/el-row/el-form-item/el-form/div/el-dialog/div
/templatescriptexport default {name: login_modal,data() {return {box: false,modalType: login,loginType: pwd,loginForm: {phone: ,password: ,validCode: ,autoLogin: false},loginRules: {phone: [{required: true, message: 请输入您的手机号, trigger: blur}],password: [{required: true, message: 请输入您的密码, trigger: blur},{min: 1, message: 密码长度最少为6位, trigger: blur}],validCode: [{required: false, message: 请输入验证码, trigger: blur}],},registerForm: {phone: ,validCode: ,password: ,passwordConfirm: ,},registerRules: {phone: [{required: true, message: 请输入您的手机号码, trigger: blur}],validCode: [{required: true, message: 请输入验证码, trigger: blur}],password: [{required: true, message: 请输入密码, trigger: blur},{min: 1, message: 密码长度最少为6位, trigger: blur}],passwordConfirm: [{required: true, message: 请输入确认密码, trigger: blur},{min: 1, message: 密码长度最少为6位, trigger: blur}]},forgetForm: {phone: ,validCode: ,password: ,passwordConfirm: ,},forgetRules: {phone: [{required: true, message: 请输入您的手机号码, trigger: blur}],validCode: [{required: true, message: 请输入验证码, trigger: blur}],password: [{required: true, message: 请输入密码, trigger: blur},{min: 1, message: 密码长度最少为6位, trigger: blur}],passwordConfirm: [{required: true, message: 请输入确认密码, trigger: blur},{min: 1, message: 密码长度最少为6位, trigger: blur}]},passwordType: password,};},watch: {loginType(){if(this.modalType login this.loginType code){this.loginRules[validCode][0].required true;}else{this.loginRules[validCode][0].required false;}}},mounted() {},methods: {//登录模式changeModalType(type){this.modalType type;if(this.$refs.loginForm){this.$refs.loginForm.resetFields();}if(this.$refs.registerForm){this.$refs.registerForm.resetFields();}},//登录模式changeLoginType(type){this.modalType login;this.loginType type;if(this.$refs.loginForm){this.$refs.loginForm.resetFields();}if(this.$refs.registerForm){this.$refs.registerForm.resetFields();}},loginModal(){this.box true;if(this.$refs.loginForm){this.$refs.loginForm.resetFields();}if(this.$refs.registerForm){this.$refs.registerForm.resetFields();}},showPassword() {this.passwordType ? (this.passwordType password): (this.passwordType );},//登录handleLogin() {this.$refs.loginForm.validate(valid {if (valid) {const loading this.$loading({lock: true,text: 登录中,请稍后。。。,spinner: el-icon-loading});loading.close();}});},//发送验证码sendValidCode(){if(this.registerForm.phone.trim() ){this.$message.warning(请输入手机号码);return;}},//注册handleRegister() {this.$refs.registerForm.validate(valid {if (valid) {const loading this.$loading({lock: true,text: 注册中,请稍后。。。,spinner: el-icon-loading});loading.close();}});},//找回密码handleForget() {this.$refs.forgetForm.validate(valid {if (valid) {const loading this.$loading({lock: true,text: 保存中,请稍后。。。,spinner: el-icon-loading});loading.close();}});},}}
/scriptstyle scoped.form-dialog .tabs-group {display: flex;justify-content: center;margin: 20px;}.el-link.el-link--danger {color: #f56c6c;}.form-dialog .tabs-group .tab-link {font-size: 16px;color: #999;}.form-dialog .tabs-group .active {font-size: 20px;color: #f94a3d;}.el-divider--vertical {display: inline-block;width: 1px;height: 1em;margin: 0 8px;vertical-align: middle;position: relative;}.form-dialog .tabs-group .tab-divider {height: 28px;}.el-divider {background-color: #dcdfe6;}.form-dialog .login-type-change {margin-top: 14px;text-align: center;}.el-link.el-link--info {color: #909399;}.el-link {display: inline-flex;flex-direction: row;align-items: center;justify-content: center;vertical-align: middle;position: relative;text-decoration: none;outline: none;cursor: pointer;padding: 0;font-size: 14px;font-weight: 500;}.form-dialog .tabs-group .tab-link:hover {color: #fa6a64;}.form-dialog .form-title {font-size: 20px;color: #666;font-weight: 700;line-height: 1;padding-bottom: 37px;text-align: center;}
/style
三、项目结构、设计说明
项目以vue项目创建前端某些元素使用element项目启动执行的命令为
npm install npm run dev当然命令可以修改为npm run serve没啥区别 注意npm install 成功了再执行 npm run dev 启动项目 结构如下截图项目已经集成和实现了需要请求后端接口的一切功能所以无须花费精力去考虑前端如何去对接后端和接口可以把一切精力放在实现前端界面设计上来。
这样不懂后端的伙伴也省心省力接口请求只需按照模板去copy就好无非就是get/post/delete/put等请求方式和参数传递的差别当然不明白的可以细问作者。
项目结构还是分为顶部具体功能显示容器底部页面存放于src/components目录下看目录命名就能明白其含义具体功能页面在views目录下。
路由在router目录中。
四、总结
后续不定期将不断完善和增加功能页面数据分离管理、页面数据通讯交互、参数变化等敬请期待。
关注作者及时了解更多好项目 作者主页也有更多好项目分享
获取源码或如需帮助可通过博客后面名片作者即可
