小U商城项目

一.项目搭建

1.vue init webpack umall  创建项目
2.cnpm i   安装依赖项
3.cnpm i axios qs vant vuex --save  安装依赖项

二.项目清空工作

assets		目录清空
components   目录清空
router/index.js  有关helloWord删除
App.vue      根组件只留模板
main.js		唯一入口文件

三.页面布局

一级路由出口login register index goodsList
二级路由出口home cate cart mime

路由规格配置:

router/index.js
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)
//布局组件
const index = ()=>import('../pages/index')// 页面组件
const login = ()=>import('../pages/login')
const register = ()=>import('../pages/register')
const home = ()=>import('../pages/home')
const cate = ()=>import('../pages/cate')
const cart = ()=>import('../pages/cart')
const goodsList = ()=>import('../pages/goodsList')
const mime = ()=>import('../pages/mime')export default new Router({routes: [{path:'/',component:index,redirect:'/home',children:[{path:'home',component:home},{path:'cate',component:cate},{path:'cart',component:cart},{path:'mime',component:mime},]},{path:'/login',component:login,},{path:'/register',component:register,},{path:'/goodsList',component:goodsList,},{path:'*',redirect:'/login',}]
})

四.引入vant组件

main.js
// 引入vant组件
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);

五.页面布局及数据获取

5-1.index.vue(布局组件)

5-2.home.vue(页面布局)

5-3.后端服务配置

1.新建数据库 shop1103
2.将数据的sql文件导库中
3.打开shop_admin 修改数据库配置文件// 数据库连接参数exports.dbConfig = {host: 'localhost', //数据库地址user: 'root',//数据库用户名password: '123456',//数据库用户密码port: 3306,database: 'shop1103' // 数据库名字}
4.npm i
5.npm start

5-4.修改umall配置代理

config/index.jsproxyTable: {"/api":{target:"http://localhost:3000",changeOrigin:true,pathRewrite:{"^/api":"http://localhost:3000"}}},

5-5.在utils/request.js中做基本配置

import axios from 'axios'
import qs from 'qs'
import {Toast} from 'vant'// 配置基础路径
const baseUrl = "/api";// 设置响应拦截
axios.interceptors.response.use(res=>{console.group('本次响应路径为:'+res.config.url)if(res.data.code !== 200){// 提示错误信息Toast.fail(res.data.msg);return;}console.log(res);return res;
})

5-6.home.vue(获取数据)

request/index.js

// 发起轮播图请求
export const getBanner = ()=>{return axios({method:'get',url:baseUrl+'/api/getbanner',})
}// 发起获取首页商品信息
export const getIndexGoods = ()=>{return axios({method:'get',url:baseUrl+'/api/getindexgoods'})
}

5-7.cate.vue(分类)

5-8.goodsList.vue(商品列表)

5-9.cart.vue(购物车列表)

5-10.会员中心

六.功能开发

6-1.注册功能

6-2.登录功能

• store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)import {state,mutations,getters} from './mutations'
import actions from './actions'
export default new Vuex.Store({state,mutations,actions,getters,
})

• store/mutations.js

export const state = {// 存放用户信息user:sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : null,
}
export const mutations = {changeUser(state,user){// 1.将用户信息存入到store中的state里state.user = user;if(user){// 2,将用户信息存入到sessionStorage中sessionStorage.setItem('user',JSON.stringify(user))}}
}
export const getters = {user(state){return state.user}
}

• store/actions.js

export default {userActions(context,user){context.commit('changeUser',user)}
}

6-3.会员中心

1.用户信息展示

2.安全退出

6-4.购物车列表

6-5.index.vue(购物车数量显示)

6-6.home.vue(添加购物车)

6-7.路由守卫

router/index.js
// 做全局路由守卫
router.beforeEach((to,form,next)=>{if(to.path == '/mime' || to.path == '/cart'){// 获取用户信息const user = JSON.parse(sessionStorage.getItem('user'))if(!user){// 消息提示Toast.fail('请登录');// 去到登录页面router.push('/login')return}}next();
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！