精华内容
下载资源
问答
  • 开源一个Vue电商项目,欢迎交流

    千次阅读 多人点赞 2021-04-30 17:22:43
    文章目录1. 项目基础架构1.1 项目基础架构1.2 主要插件1.3 路由封装1.4 sessionstorage的封装1.5 ...项目使用到的技术栈:Vue全家桶,后台接口线上调联,Sass预编译,ElementUI,前端优化,微信支付宝支付… 1.1 项

    1. 项目基础架构

    项目使用到的技术栈:Vue全家桶,后台接口线上调联,Sass预编译,ElementUI,前端优化,微信支付宝支付…

    1.1 项目基础架构

    项目的基本结构:

    VueProject
    └─ mistore
       ├─ babel.config.js
       ├─ package-lock.json
       ├─ package.json
       ├─ public
       │  ├─ favicon.ico
       │  └─ index.html
       ├─ README.md
       └─ src
          ├─ api
          │  └─ index.js
          ├─ App.vue
          ├─ assets
          │  └─ logo.png
          ├─ components
          │  ├─ NavFooter.vue
          │  └─ NavHeader.vue
          ├─ main.js
          ├─ pages
          │  ├─ alipay.vue
          │  ├─ cart.vue
          │  ├─ detail.vue
          │  ├─ home.vue
          │  ├─ index.vue
          │  ├─ login.vue
          │  ├─ order.vue
          │  ├─ orderConfrim.vue
          │  ├─ orderList.vue
          │  ├─ orderPay.vue
          │  └─ product.vue
          ├─ router.js
          ├─ storage
          │  └─ index.js
          ├─ store
          └─ util
             └─ index.js
    
    

    首先贴出我们项目的几个大体实现效果图
    在这里插入图片描述

    1.2 主要插件

    “axios”: “^0.21.1”

    “element-ui”: “^2.15.1”,

    “node-sass”: “^5.0.0”,

    “sass-loader”: “^11.0.1”,

    “vue-awesome-swiper”: “^4.1.1”,

    “vue-cookie”: “^1.1.4”,

    “vue-lazyload”: “^1.3.3”,

    1.3 路由封装

    使用路由懒加载的方式进行路由的设置,根据我们的项目设计稿封装路由

    伪代码如下:

    import vue from 'vue';
    import Router from "vue-router"
    vue.use(Router);
    // 使用路由懒加载的方式加载路由
    var cart = () => import('./pages/cart.vue');
    ...
    var router=new Router({
      routes: [
        // 初始默认路由(home)
        {
          children: [
            // 商品详情(动态)
            // 大图展示(动态)
            // 首页
          ]
        },
        // 购物车路由
        // order父路由
          children: [
            // 订单列表
            // 订单确认
            // 订单支付
          ]
        },
        //登录
      ],
      mode:'history'
    });
    export default router
    

    1.4 sessionstorage的封装

    为什么要封装storage:

    1. Storage本身虽然有Api,但是只是简单的键值对的形式
    2. Storage只能存储字符串,需要人工转换成json对象
    3. Storage只能一次性清空,不能单个清空

    我们通常在Storage中存储json对象,因此我们需要自己封装Storage方法。

    /* 
    Storage封装
    */
    const STORAGE_KEY = 'mall';
    export default {
      // 存储值
      setItem(key, value, modules_name) {
        if (modules_name) {
          var all = this.getItem(modules_name)
          all[key] = value;
          // 这里递归本方法将modules_name作为key(已有),再将当前添加进去的all放进此module_name中,此时的val就包含了所有值,最后直接添加即可
          this.setItem(modules_name, all)
        } else {
          //只传入两个参数:
          let val = this.getStorage();
          console.log(val);
          val[key] = value;
          window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
        }
      },
      /*
      获取值(可以传入一个值也可传入两个值)
      一个参数:没有moudle直接单对象
      一个参数:获得moudle下的key对应的对象
      */
      getItem(key, modules_name) {
        if (modules_name) {
          let val = this.getItem(modules_name);
          if (val) return val[key]
        }
        return this.getStorage()[key];
      },
      // 获取整个数据(转为json格式):将数据转换为json格式。
      getStorage() {
        return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
      },
      // 删除某一个值
      clear(key, modules_name) {
        let val = this.getStorage();
        if (modules_name) {
          delete val[modules_name][key]
        } else {
          delete val[key]
        }
        window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
      }
    }
    

    使用方法:

    // console.log(storage.getStorage());
    // storage.setItem('a',1);
    // storage.setItem('address','北京','person');
    // storage.setItem('abc',{data:88},'person');
    storage.clear('a')
    

    这样我们可以将整个项目中使用的storage全部放在一个key/value中,在value中存放所有的data,使用json的形式存储

    1.5 接口错误拦截

    1. 统一报错
    2. 未登录统一拦截
    3. 请求值,返回值统一处理

    我们通过使用axios的拦截来统一处理请求的情况处理以及对应的返回值。以及处理未登录时进行跳转登录界面等等。还有统一请求值以及返回值的处理(比如表单的格式等等)。

    1.6 接口环境的设置

    通常请开个下我们项目再不同的阶段有不同的接口

    也就是说当我们使用jsonp或者cors跨域的方式来请求接口时,而且我们分环境时会有不同的请求接口,那么我们应该遵循es6模块化的思想,我们将所有的环境变量进行统一的抽取。而避免在业务代码中修改我们的代码而造成一些不可避免的错误。

    1. 开发上线的不同阶段,需要不同的配置(也就是说我们不同阶段所需要的接口也是不一样的)
    2. 不同的跨域方式,配置不同
    3. 打包的时候通过注入环境参数,统一管理环境,输出不同的版本包

    当我们在代理中使用不同的环境接口怎么办呢,这时我们就可以直接进行修改vue.config.js的baseurl的可以

    一般情况下我们有三套环境,分别是开发,测试,生产。当我们需要再添加环境时需要我们新建.dev.环境名文件进行设置NODE_DEV的值。然后再进行响应配置。

    ​ 以下是我们的一个实例:

    package.json下

    "scripts": {
        "serve": "vue-cli-service serve --mode=development",
        "test": "vue-cli-service serve --mode=test",
        "haha": "vue-cli-service serve --mode=haha",
        "build": "vue-cli-service build --mode=production",
      },
    

    dev.js模块(不同环境不同接口的配置):

    /*
    这是当我们的跨域方式为jsonp或者cors时才能使用的baseURL 
    不同环境下的BaseURL地址模块
    process.env.NODE_ENV:获取nodejs进程的一些参数信息
    */
    let baseURL;
    switch (process.env.NODE_ENV) {
      case 'development':
        baseURL = 'http://dev-mall-pre.springboot.cn/api'
        break;
      case 'test':
        baseURL = 'http://test-mall-pre.springboot.cn/api'
        break;
      case 'haha':
        baseURL = 'http://haha-mall-pre.springboot.cn/api'
        break;
      case 'production':
        baseURL = 'http://mall-pre.springboot.cn/api'
        break;
      default:
        baseURL = 'http://mall-pre.springboot.cn/api'
        break;
    }
    export default { baseURL }
    

    自定义环境配置(haha).env.haha文件:

    NODE_ENV='haha'
    

    1.7 MOCK设置

    为什么要使用MOCK:

    1. 开发阶段,为了高效率,需要提前Mock
    2. 减少代码冗余,灵活插拔
    3. 减少沟通,减少接口联调时间

    主流的三种MOCK设置:

    1. 本地创建json
    2. easy-mock平台(推荐本地搭建easymock平台)
    3. 继承Mock API(推荐Mock.js)

    我们需要注意的是,第一种方式是最简单,不需要任何学习成本的,当时带来的弊端就是不能统一接口,也就是说我们需要改的地方比较多。第二种是发送的真实的请求,第三种是拦截请求,在本地模拟数据,后两种都有一定的学习成本,也推荐使用。

    2.首页功能开发

    1. NavHeader开发

    2. HeaderFooter

    3. 首页轮播图(Swiper)

    4. 广告位

    5. 商品展示(axios请求)

    6. 工具model的封装(使用了Vue动画组件)

    7. 图片懒加载 vue-lazyload 插件的使用

    3.登录功能开发

    1. 登录注册界面实现

    2. 登录逻辑(设置Cookie缓存用户登录状态)

    3. 注册逻辑(错误拦截的小坑,无法获取msg信息,已处理)

    疑问

    拉取用户信息和购物车数量到Vuex有什么作用,用户界面刷新Vuex的所有数据都可能清空,拉取这两条数据有什么本质上的做作用?

    解答

    Vuex中只传输这两条数据(因此需要再次拉去一次),自己想太多,以为Vuex中的用户的信息和后面的接口请求有关系,其实这里Vuex展示保存了这两个数据用于再主页展示而已。

    和Cookie的周期搞混乱了。也就是说我们使用这个拉去的前提时我们的状态时登录的,所以才会有数据。因此这个解决的就是页面刷新可能会导致Vuex中的States数据清空。

    1. 添加Vuex进行首页用户名和购物车数量的管理

    2. 退出登录功能的实现

    3. 注册登录状态使用vuex状态托管

    注意点:在index刷新时拉去Vuex中的数据,且在index的声明周期再次拉去数据,在声明周期内拉去数据的原因是因为我们使用的是spa模式,因此购物车数据改变并不会刷新,因此我们每次组件进入时再次拉去购物车数据(我认为是有必要的),username可以不采用这种做法

    4.产品站功能开发

    1. 顶部吸顶插件及其功能
    2. 产品站布局(包括底部的swiper,以及视频展示)
    3. 视频的动画效果
    4. 接口的请求渲染

    5.商品详情页面

    1. 完成界面
    2. 请求数据进行交互
    3. 添加购物车跳转购物车界面

    注意:

    加入购物车时必须要登录状态才可以完成,这里有当时封装axios时留下的一个坑。就就当状态为10时,应该返回reject状态的promise,

    所以当我们未登录时,点击添加到购物车,就会执行我们then里面的代码(Promise如果没有指定返回指定状态会默认返回resolve状态)。造成一些不必要的bug

    6.购物车页面

    1. Order-Nav组件的封装
    2. 购物车界面
    3. 购物车接口的请求以一些判断

    总结:再实际开发中,为了预防一些安全问题,购物车的逻辑是由后端完成的,我们前端只需要属性接口文档,将各个操作对应即可

    7.ElementUI集成

    结合官方文档完成Message等插件的按需加载,提高了开发效率

    8.订单确认功能

    1. 布局完成
    2. 初始化交互,渲染当前id的收货地址、购物车选中的商品信息等
    3. 完成收货地址的删除、改变、增加
    4. 其中使用到了v-distpicker省市级联动插件,使用方法网上有
    5. 完成订单的结算,生成了订单编号

    9.订单支付功能

    1. 完成布局

    2. 实现数据交互

    3. 支付宝支付(后端传html的from表单代码)进行集成

    4. 微信支付,将后端的支付地址转为二维码显示(Native支付)

    5. 微信支付轮询,判断是否支付(若检测到用户已支付则跳转至订单列表页面,关闭则轮询停止)

    微信支付:content内容是支付链接,转换为二维码即可扫码支付

    支付宝支付:content是html源码,渲染到页面上后自动跳转到支付页面

    将url转为二维码使用QRCode插件。

    10.订单列表功能实现

    1. 界面实现
    2. 交互
    3. 按需引入elementUI分页器组件并实现分页功能
    4. 排查了一些后端接口的错误,例如,个人地址信息接口中的receiverPhone和支付的接口中的receiverPhone不同步

    常见的三种分页功能:
    1.分页器

    2.按钮加载更多

    3.滚动加载更多

    11.源码地址

    项目源码地址:GitHub传送门

    欢迎学习,欢迎star!

    展开全文
  • 路由是什么?为什么要使用路由?路由有什么功能?可以写出路由跳转的源码吗? 写完路由部分,四连打击让我深思,一... Cube-UI的电商项目demo,面向 vue 初学者,场景虽简单,但五脏俱全。涵盖非常多的vue及其相关...

    路由是什么?为什么要使用路由?路由有什么功能?可以写出路由跳转的源码吗?

    写完路由部分,四连打击让我深思,一起来学习一下vue的翅膀Vue-Router吧~

    这是一个基于 vue & axios & mock & token & stylus & Cube-UI的电商项目demo,面向 vue 初学者,场景虽简单,但五脏俱全。涵盖非常多的vue及其相关技术的基本操作。有详细的注释,帮助大家快速上手 vue 。

    Github地址


    正文部分

    作为VUE的初学者,创建一个项目后的demo里面就有home页面和about页面的跳转。在写这个小项目的时候,我也是照葫芦画瓢没有过多的思考。写完路由部分的时候,反过来思考,心中也有许多疑问。路由是什么?为什么要使用路由?路由有什么功能?可以写出路由跳转的源码吗?
    带着这些问题我查阅了很多资料和文章,发现它们都比较散,往往只讲述一个小点。如果你也有相同的问题就跟随我来逐一击破吧~

    路由是什么?

    1. 路由:即浏览器中的哈希值(# hash)与展示视图内容(template)之间的对应规则。

    在计算机网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它是决定一个端到端的网络路径。所以说路由就是用来解析URL以及调用对应的控制器的。

    1. vue中的路由是:hash 和component的对应关系。Vue路由即vue-router,在web开发中,“router”是指根据url分配到对应的处理程序。

    通俗的来说,在web开发中,路由就是一套映射规则(一对一的对应规则),由开发人员制定规则。
    当URL中的哈希值(# hash)发生改变后,路由会根据制定好的规则,展示对应的视图内容。

    为什么要使用路由?

    在传统的web开发中每一个请求地址都会请求服务器来进行处理,但是用户有些操作则无需请求服务器,直接页面端修改下逻辑就能达到目的,在这种方式下最好的方法是使用路由,因为使用路由时,URL会随着改变,用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人,这种方式对于搜索引擎和用户来说都是友好的。

    在 Web app 中,通过一个页面来展示和管理整个应用的功能。
    SPA(单页应用程序)往往是功能复杂的应用,为了有效管理所有视图内容,前端路由 应运而生!

    路由有什么功能?

    这个问题,我是通过Vue Router开发者文档,进行了解的,但是我看完之后还是有点懵懵懂懂,没有特别理解,之后我是通过查阅一些文章对路由的功能有了更深入的了解,下面跟随作者一起结合项目来看看吧~

    基本使用

    安装:npm i -S vue-router或者创建vue项目时就选择了router

    <!-- app.vue -->
    <template>
      <div id="app">
      <!-- 5 路由入口 指定跳转到只定入口 -->
        <div id="nav">
          <router-link to="/login">登陆</router-link> |
          <router-link to="/register">注册</router-link>
        </div>
        <!-- 7 路由出口:用来展示匹配路由视图内容 -->
        <router-view/>
      </div>
    </template>
    
    // 3 创建两个组件  作者就不写代码啦vue项目一开始的demo有创建。
    
    //router中的index.js
    import Register from '../views/Register.vue'
    import Login from '../views/Login.vue'
    
    Vue.use(VueRouter)
    
    // 4 创建路由对象
    const routes = [
      {
        path: '/',
        name: 'login',
        redirect: '/login'
      },
       // 路径和组件一一对应
      {
        path: '/register',
        name: 'register',
        component: Register
      },
      {
        path: '/login',
        name: 'login',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        //项目路由懒加载,秒开
        component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
        },
    ]
     
    <!-- main.js -->
    // 1 导入 vue.js 
    import Vue from 'vue'
    import './cube-ui'
    import App from './App.vue'
    // 2 导入 路由文件 
    import router from './router'
    import store from './store'
    import axios from 'axios'
    import 'amfe-flexible'
    import steaxios from './setaxios'
    
    steaxios();
    Vue.config.productionTip = false
    Vue.prototype.$http=axios//挂载axios
    new Vue({
      router,
      store,
      // 6 将路由实例挂载到vue实例
      render: h => h(App)
    }).$mount('#app')
    

    通过代码注释中步骤,就完成路由基本功能的实现啦!

    重定向

    在这个小项目中,我是直接使用重定向,让页面一开始在根路径的时候就跳转到登陆页面。

     {
        //  将path 重定向到 redirect
        path: '/',
        name: 'login',
        redirect: '/login'
      },
    

    重定向还有两种方式

    1. 重定向的目标可以是一个命名的路由:
    { path: '/', redirect: { name: 'login' }}
    
    1. 重定向的目标可以是一个方法,动态返回重定向目标:
    { path: '/', redirect: to => {
          // 方法接收 目标路由 作为参数
          // return 重定向的 字符串路径/路径对象
        }}
    

    注:导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。

    懒加载(延迟加载)

    1. 定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。
    2. 作用:路由懒加载可以帮我们在进入首屏时不用加载过度的资源,从而减少首屏加载速度。也就是按需加载。使用第三方组件库依赖过大,会给首屏加载带来很大的压力,一般解决方式是按需求引入组件。如果引用组件的组件,也是跳转到相应路由,再进行加载需要使用的组件,可以提高性能。
    3. 实现懒加载的三种方式:
    一、Vue异步组件技术:
    	{
    		path: '/home',
    		name: 'Home',
    		component: resolve => reqire(['path路径'], resolve)
    	}
    二、es6提案的import()
    	const Home = () => import('path路径')
    	//本项目使用的方式
       {
        path: '/login',
        name: 'login',
        component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
        },
    三、webpack提供的require.ensure()
    	{
    		path: '/home',
    		name: 'Home',
    		component: r => require.ensure([],() =>  r(require('path路径')), 'demo')
    	}
    总结来自:
    作者:小梦哟
    链接:https://juejin.im/post/5e4c0b856fb9a07ccb7e8eca
    来源:掘金
    

    可以手写懒加载源码吗?

    这个问题我也想了一下,实现懒加载肯定是要直接操作DOM。作为前端小白的我能力有限,暂时无法完成,但是找到了一篇文章可以供大家参考。

    懒加载的弊端

    所有的东西都是一把双刃剑,有利也有弊,只能按需使用,切不可过度使用。

    大项目中的路由懒加载不适用于开发环境(会导致保存代码时热更新代码时间很长20s左右)

    解决办法
    在 router/ 文件夹中加入2个文件夹:

    _import_development.js

    module.exports = file => require('@/' + file + '.vue').default
    

    _import_production.js

    module.exports = file => resolve => require(['@/' + file + '.vue'], resolve)
    

    index.js

    const IMPORT = require('./_import_' + process.env.NODE_ENV + '.js');
    

    组件引入时写入:

    component: IMPORT('pages/mainPage')  //  组件
    

    嵌套子路由

    在我的小项目中也使用了嵌套路由。嵌套路由顾名思义,路由中又包含子路由。例如:

    /botnav/index                         /botnav/list
    +------------------+                  +-----------------+
    | botnav           |                  | botnav          |
    | +--------------+ |                  | +-------------+ |
    | | index        | |  +------------>  | | list        | |
    | |              | |                  | |             | |
    | +--------------+ |                  | +-------------+ |
    +------------------+                  +-----------------+
    

    想要在botnav页面中,切换index,list等多个页面时,嵌套路由就派上用场啦,它的书写规则如下:

    注:childern子路由path一定不要加上‘\’,写代码时,写路由路径写习惯了,很容易犯这个小错误

    {
        path: '/botnav',
        name: 'botnav',
        component: () => import('../views/Botnav.vue'),
     children:[
          {
            path: 'index',
            name: 'index',
            component: () => import('../views/index.vue')
          },
          {
            path: 'list',
            name: 'list',
            component: () => import('../views/List.vue')
          },
          {
            path: 'search',
            name: 'search',
            component: () => import('../views/Search.vue')
          },
          {
            path: 'cart',
            name: 'cart',
            component: () => import('../views/Cart.vue')
          },
          {
            path: 'mine',
            name: 'mine',
            component: () => import('../views/Mine.vue')
          },
        ]
    }
    

    实现效果:


    这几个botnav就可以在同一个页面切换啦。

    过渡动效

    在写项目时,为了增加用户体验感,加上路由切换时的过渡动效是必不可少的,下面先看一下过度动效的效果展示:

    是基本的动态组件,所以我们可以用 组件给它添加一些过渡效果:

    <template>
        <div>
          <transition :name="transitionName">
            <router-view class="Router"></router-view>
          </transition>
            <cube-tab-bar
                v-model="selectedLabelDefault"
                :data="tabs"
                @click="clickHandler"
                @change="changeHandler"
                class="botnav">
            </cube-tab-bar>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          transitionName:'slide-right',
          selectedLabelDefault: '首页',
          tabs: [{
            label: '首页',
            icon: 'cubeic-home'
          }, {
            label: '分类',
            icon: 'cubeic-tag'
          }, {
            label: '搜索',
            icon: 'cubeic-search'
          }, {
            label: '购物车',
            icon: 'cubeic-mall'
          }, {
            label: '我的',
            icon: 'cubeic-person'
          }]
        }
      },
      methods: {
        clickHandler (label) {
          // if you clicked home tab, then print 'Home'
          console.log(label)
        },
        //点击与自身不同的其他导航
        changeHandler (label) {
          // if you clicked different tab, this methods can be emitted
          switch(label){
              case '首页':
              this.$router.push('/botnav/index');
              break;
              case '分类':
              this.$router.push({path:'/botnav/list'});
              break;
              case '搜索':
              this.$router.push({path:'/botnav/search'});
              break;
              case '购物车':
              this.$router.push({path:'/botnav/cart'});
              break;
              case '我的':
              this.$router.push({path:'/botnav/mine'});
              break;
          }
        }
      }
    }
    </script>
    
    <style lang="stylus" scoped>
        .cube-tab-bar.botnav
            position  fixed
            bottom  0
            left 0
            z-index 1000
            width 100%
            background #fff
            font-size  25px
            .cube-tab div
                font-size  16px
                padding-top  3px
            i 
                font-size 20px
                <!--以下代码实现过渡效果-->
          .Router
            position absolute
            width 100%
            transition all 0.8s ease 
          .silde-left-ender,.slide-right-leave-active
            opacity 0
            -webkit-transform translate(100%,0)
            transform translate(100%,0)
          .slide-left-leave-active,.silde-right-enter
            opacity 0
            -webkit-transform translate(-100%,0)
            transform translate(-100%,0)
    </style>
    

    以上代码建立了一个botnav,用包裹,并给transition起了一个名字,利用css中的leave和enter来完成页面切换,在里面写上要实现的效果。这里我引用VUE.js中的一张图片来直观的解释:

    本项目中用silde-right替换了v-。
    路由还有其他很多功能,我就不一一介绍啦,大家有兴趣可以去看看官方文档。下面我们来解答最后一个疑问,?可以写出路由跳转的源码吗?

    可以写出路由跳转的源码吗?

    想要知道路由的源码怎么写?一定要知道路由是怎么实现的。我浅显的理解是,对于路由的hush模式,我们切换一个页面,就是对一个视图的展示。需要对这个视图进行展示,一定想要获取这个页面的huas值,然后去对这个视图进行注册,然后进行展示。这样利用路由切换页面就成功啦。我不知道我的理解是否正确,希望大佬指出。下面我对我的思路进行源码的书写,先放上效果图。

    我们先写三个链接:

     <div id="nav">
        <a href="#/page1">page1</a>
        <a href="#/page2">page2</a>
        <a href="#/page3">page3</a>
      </div>
      <div id="container"></div>
    

    然后我们定义一个hashRouter方法,并实现进入首页时,返回空。

    class HashRouter {
    //初始化时执行
        registerIndex(cb = () => {}) {
          this.routers.index = cb;
        }
      }
    

    接下来我们进行获取hash和对页面视图进行注册:

     class HashRouter {
        constructor() {
          this.routers = {}; //配置, 是设计关键点 routes 
          //存储路由配置的 hash key  val Component
          window.addEventListener('hashchange', () => {
            let hash = window.location.hash.slice(1),//获取页面hash
              handler;
            if(!hash) {
              handler = this.routers.index;
            } else {
              handler = this.routers[hash];
            }
            handler.call(this);//将hash抛出去
          })
        }
        // hahschange 后执行哪个函数
        // vue 组件 函数式组件 callback
        register(hash, callback){
          this.routers[hash] = callback;//进行视图注册
        } 
        //初始化时执行
        registerIndex(cb = () => {}) {
          this.routers.index = cb;
        }
      }
    

    最后我们将注册后的视图,插入到id=“container”,让页面显示

    let router = new HashRouter(); //路由对象, 类型为hash
      let container =
       document.getElementById('container'); // 根组件
      router.registerIndex(() => container.innerHTML = '首页')
      router.register('/page1', function ()  
      {
        console.log(this.routers);
        container.innerHTML = '/page1';
      }) // 路由 对应执行事  //.vue template部分
      router.register('/page2', () => container.innerHTML = '/page2'); 
      router.register('/page3', () => container.innerHTML = '/page3'); 
    

    路由简单实现就完成啦,如有错误还望大佬指出。


    写在后面

    引用小金鱼的一句话,当然纸上学来终觉浅,绝知此事要躬行。学完理论就需要去实践,大家看完之后一定要自己去操作一下,不然似懂非懂,第二天就忘啦。在此作者再次附上GitHub的地址vue-jingdong (不要吝惜你的小星星哦)。这是一个系列文章,未完待续,期待与你一起学习。如果对你有帮助的话,不妨送上你的star,送人玫瑰,手留余香,谢谢!

    展开全文
  • 项目由 公众号:编程算啥事 收集整理提供的vue框架的后台电商管理系统的分享源代码。 本人亲自维护!若需要该项目教学视频学习,关注“编程算啥事”公众号回复“vue后台电商管理”获取!或者有需要联系qq:...
  • 掌握的技术: 1.Vue+Django REST Framework前后端分离技术 2.彻底玩转restful api开发流程 3.Django REST Framework的功能实现和核心源码分析 4.Sentry完成上线系统的错误日志的...1.vue前段项目 2.django r...

    掌握的技术:

    1.Vue+Django REST Framework 前后端分离技术

    2.彻底玩转restful api开发流程

    3.Django REST Framework的功能实现和核心源码分析

    4.Sentry完成上线系统的错误日志的监控和警告

    5.第三方登录和支付宝支付的集成

    6.本地调试远程服务器代码技巧

     

    课程系统构成:

    1.vue前段项目

    2.django rest framework系统实现前台功能

    3.xadmin的后台管理系统

     

    Django REST Framework技能:

    一、通用view实现rest api接口:

    1.ApiView方式实现api

    2.GenericView方式实现api接口

    3.Viewset和router方式实现api接口和url配置

    4.django_filter,SearchFilter,OrderFilter,分页

    5.通用mixins

    二、权限和认证:

    1.Authentication用户认证设置

    2.动态设置permission,Authentication

    3.Validators实现字段验证

    三、序列化和表单验证

    1.Serializer

    2.ModelSerializer

    3.动态设置Serializer

    四、支付,登录和注册

    1.json web token实现登录

    2.手机注册

    3.支付宝支付

    4.第三方登录

    五、进阶开发

    1.django rest framework部分核心源码解读

    2.文档自动化管理

    3.django rest framework的缓存

    4.Throttling对用户的ip进行限速

    六、开发中常见的问题

    1.本地系统不能重现的bug

    2.api接口出错不能及时的发现或难找到错误栈

    3.api文档管理问题

    4.大量的url配置造成url配置越来越多 难以维护

    5.接口不及时去更新文档对方不知道如何去测试接口,但写文档会花费大量的时间去维护

    6.为了防止爬虫,我们需要针对api的访问频率进行限制,比如一分钟,一小时或者一天用户的访问频率限制问题

    7.某些页面将数据放入缓存,加速某些api的访问速度

    七、开发中常见的问题解决方案

    1.通过介绍pycharm的远程服务器代码调试技巧让大家不仅可以调试支付,第三方登录还可以调试远程服务器的代码来重现服务      器上的bug

    2.通过docker搭建sentry来体验错误日志监控系统,让我们不仅可以得到线上的错误栈还能及时在发生系统错误时收到邮件通知

    3.django rest framework的文档自动化管理以及url的注册管理功能会让我们省去写文档的时间

    4.django rest framework的文档管理功能不仅可以让我们省去写文档的时间还能直接在文档里面测试接口、自动生成的js接口代       码、shell测试代码和Python测试代码

    5.django rest framework提供的throttle来对api进行访问频率限制

    6.引入第三方框架来设置某些api的缓存

     

    Django进阶知识点

    1.Django mirgrations原理

    2.Django信号量

    3.Django从请求到响应的完整过程

    4.独立使用Django的model

     

    Vue知识点

    1.Vue技术选型分析

    2.API后端接口数据填充到Vue组件模板

    3.Vue代码结构分析

     

    课程

    1-2:介绍+环境搭建

    3:设计数据库+导入原始数据

    4:restful api基础以及vue项目结构介绍

    5:商品列表页功能

    6:商品类别功能

    7.手机注册+用户登录

    8:商品详情页+收藏功能

    9:个人中心功能

    10:购物车、订单和支付宝支付功能

    11:首页、商品相关数量、缓存、访问限速功能

    12:第三方登录

    13:sentry系统错误日志监控

    展开全文
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
  • #vue_demo ##电商项目模板前后台 ###主要利用vue_element ui 组件建立模板 利用axios构建json数据交换
  • Vue电商后台管理系统后台API接口服务器 技术栈 Node.js 表示 MySQL 项目整体文件说明 config配置文件目录default.json替换配置文件(其中包含数据库配置,jwt配置) dao数据访问层,存放对数据库的增删改查操作DAO...
  • vue_shop 项目设置 npm install 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build Lints 和修复文件 npm run lint 自定义配置 请参阅。
  • (购物中心) 简介 本项目具有首页,分类,购物车...主要使用Vue全家桶,Vant UI,scroll和一些移动端的兼容配置技术;下载此项目替代是没有请求接口的,不可以完善运行;可以使用接口请;记得Star哦,谢谢;(不可商用
  • 前台商城采用uniapp模板,有商城首页、广告轮播图、分类展示、商品搜索、商品展示、商品规格选择、购物车、订单...后台系统采用vue,使用多商户登录平台、有系统管理、商品管理、商户管理、订单管理、营销管理等模块
  • 安装Vue,通过Vue建立专案项目添加Element-UI,axios类别库安装MySQL资料库安装Node.js环境 2021/2/25 完成登录页面 2021/2/26 制作主页面框架及设置路由位置 2021/2/27 添加用户列表的增删修及分页实现 2021/2/28 ...
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
  • 毕业设计电商网站源码 vue_demo 项目记录 初始化项目配置 npm init -y 使用默认初始化 npm init 自定义初始化 npm i 安装包(根据package.json) npm命令 npm install xxx 安装模块如不指定版本号,默认会安装最新的...
  • vue_shop 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 【超详细小白教学】Vue+nodejs电商项目部署指南

    千次阅读 多人点赞 2021-01-22 13:48:58
    【超详细小白教学】Vue电商项目部署指南 前言 食用指南:推荐照着我的设置来走。 在最前面,厚着老脸,跟大家要一个star。 ???? 本项目Github源码 1 准备工作 1.1 云服务器购买 进入阿里云官网 找到上边导航栏的产品...

    【超详细小白教学】Vue电商项目部署指南

    前言

    🚩在线体验地址
    体验账号:admin 密码:123456 已经默认设置啦,可以直接登录。

    食用指南:推荐照着我的设置来走。

    在最前面,厚着老脸,跟大家要一个star。各位看官老爷们希望能给我的Github一个star~~~为了整理这个纯小白部署上线教程,我又重新购买了一个服务器,从头弄了一遍,看在这个份上可怜可怜小人把呜呜呜呜。

    🐱 本项目Github源码

    项目从0到1博客指南:
    2021 Vue全家桶开发电商管理系统(Element-UI)01-项目初始化
    2021 Vue全家桶开发电商管理系统(Element-UI)02-配置API接口服务器并调试接口
    2021 Vue全家桶开发电商管理系统(Element-UI)03-实现登录退出功能
    2021 Vue全家桶开发电商管理系统(Element-UI)04- 系统主页和用户列表功能
    2021 Vue全家桶开发电商管理系统(Element-UI)05 - 用户权限管理的实现
    2021 Vue全家桶开发电商管理系统(Element-UI)06 商品分类
    2021 Vue全家桶开发电商管理系统(Element-UI)07 参数管理
    2021 Vue全家桶开发电商管理系统(Element-UI)08 商品列表功能的实现
    2021 Vue全家桶开发电商管理系统(Element-UI)09 数据报表功能
    2021 Vue全家桶开发电商管理系统(Element-UI)10-项目优化上线
    【超详细小白教学】Vue+nodejs电商项目部署指南

    1 准备工作

    1.1 云服务器购买

    进入阿里云官网 找到上边导航栏的产品→云服务器ECS

    image-20210122124410391

    随后点击立即购买

    image-20210122124438550

    进入购买页面后,按照我的选择进行选择就好啦

    image-20210122124552724

    在实例中,选择当前带,筛选“1vCPU"image-20210122124626556

    然后选择这个最便宜的17.1的就好啦,够用。其他默认

    image-20210122124738237

    接下来选择镜像 公共镜像Alibaba 2.1903。

    image-20210122124815077

    接下来是选择存储和购买时长。存储的话,购买最低配20就够用了,购买时长,初学者推荐先购买一个月或一周的。弄好了可以再续。

    image-20210122125003315

    弄好之后点击下一步网络和安全组。网络默认。

    带宽计费模式这里我是选择了按使用流量,峰值设为4。(说到底还是为了节省,按固定带宽太贵了23元呢!按流量0.8/GB,再怎么花也不超过5块钱。)

    关于带宽计费模式两者的购买意见:
    服务器使用频繁:按固定
    不频繁:使用流量
    

    因为针对我们初学者来说,使用服务器最频繁的时候就是部署上线的时候,其他时候几乎没啥请求。所以按流量足以。

    image-20210122125152381

    然后是选择安全组

    image-20210122125550002

    选择一个安全组,然后按选择就好了。如果你这里没有安全组,先关掉这个模态框,在安全组那一行选择新建安全组。

    image-20210122125630596

    image-20210122125714066

    跳转至创建安全组页面,所有都默认就好了,直接创建。

    image-20210122125757879

    选择完安全组之后,按下一步系统配置

    image-20210122125900085

    在这里选择自定义密码

    记住这个账号密码,是后面ssh登录要用的。其它默认,直接下一步:分组设置

    image-20210122130007997

    这里啥也不用填,直接下一步确认订单

    image-20210122130108040

    打钩服务协议那一行,确认下单,付钱,就完事了。

    image-20210122130144359

    1.2 代码准备

    前端代码准备

    打开main-prod.js(如果你没有区分开发文件和发布文件的话,那就打开main.js),修改配置请求根路径如下图所示。其中118.31.171.210修改成你的服务器公网ip,端口号改成你的接口所用的端口,在此处我是用8801。可以跟着我写

    axios.defaults.baseURL = "http://118.31.171.210:8801/api/private/v1/"
    

    image-20210121204232140

    此外,还需要进入到Add.vue中进行修改

    image-20210121201838717

    将uploadurl中的ip地址和端口号改成上面用的。

    image-20210121204346254

    接下来进行npm run build,生成打包的dist文件。

    image-20210121202132997

    别着急,还没结束,打开dist文件夹中的index.html

    image-20210121202321412

    自动生成的html代码里面的路径可能是错误的,我们需要将每一行/改成以下形式./

    错误路径:

      <link href="/css/cate_params.fed87b68.css" rel="prefetch">
    

    image-20210121202409668

    正确路径:

      <link href="./css/cate_params.fed87b68.css" rel="prefetch">
    

    image-20210121202649707

    至此,我们的前端代码准备就绪。我们只需要上传dist文件夹,为了方便,我们创建一个"部署"文件夹,将dist文件夹拷贝进去。

    image-20210121202934658

    后端代码准备

    后端代码为vueShop-api-server,建议将里面包含的node_modules文件夹直接删除(下方截图已删除node_modules文件夹),因为在Linux中还需要进行依赖包下载。

    image-20210121203039412

    在后端代码中,我们一共需要改2处。

    1.修改config/default.json文件中的baseURL、user、password,如下图所示。

    ​ baseURL:仅修改接口端口号,其他勿动。

    ​ user:数据库用户名。

    ​ password:数据库密码。

    记住user和password!!!后面有用。

    image-20210121203348910

    2.打开app.js,将listen端口号修改成你的接口端口号。

    image-20210121203651871

    vueShop-api-server文件夹拷贝至“部署”文件夹中。

    image-20210121203840935

    至此,我们的代码准备工作完成。

    2 部署上线

    2.1 安装并登录宝塔系统

    打开命令提示符cmd,输入以下命令,然后输入密码,就进来到Linux系统啦。

     ssh root@你的服务器公网ip
    

    image-20210121204939694

    接下来我们需要下载宝塔工具。

    安装命令:

    yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
    

    当出现…?选择y就好啦,然后等待下载完成。

    image-20210121205227995

    安装完成后,我们可以看到外网网址以及用户名、密码。复制外网网址,到浏览器中打开,不要关闭此窗口。

    image-20210121205614603

    如果刚安装好面板,但是没有把系统初始的用户名和密码记下来,可以进入ssh然后输入命令如下:bt default
    

    此时无法访问外网地址。为什么呢?因为在阿里云那里我们没有放行面板8888端口。接下来打开阿里云。

    image-20210121205903850

    在左侧栏中选择"云服务器ECS",打开。

    image-20210121210051290

    再次从左边中选择“实例”,点击蓝字进入实例详情

    image-20210121210220481

    image-20210121210252729

    在实例详情中点击“安全组”,并再次点击蓝字进入安全组管理

    image-20210121210416549

    选择“入方向”并点击“手动添加”

    image-20210121210543009

    填写优先级默认1,协议类型默认自定义TCP,端口号8888,授权对象均为0.0.0.0/0,点击保存。

    image-20210121210741283

    为了避免后期反复返回阿里云增加端口号,我们一次性添加完,按照以下示意图进行添加,一共开放12个端口,自己检查一下对不对。注意我们的端口号全部是在入方向添加,出方向不用管,出方向默认全部放行

    有些人会默认产生80、3389端口,有些人不会,自行添加就好。

    image-20210121211226451

    端口说明:

    3306:mysql默认端口
    80:我自己开放的访问我的页面的端口
    8801:api的端口
    
    其他接口为宝塔的一些接口和阿里云默认接口,建议直接按照我的照抄
    

    此时我们在重新刷新页面,就显示宝塔页面了,还记得在cmd中看到的账号密码吗?输入账号密码进入宝塔系统。

    image-20210121211555699

    进入之后需要绑定宝塔账号,自己去注册就好了,这个就不用多说。

    image-20210121211716561

    接下来他会跳出推荐安装页面,不用管,直接关掉。

    image-20210121211822241

    进入系统后,我们去安装东西,点击左边栏的“软件商店”

    image-20210121212014968

    安装一下三个软件,均使用极速安装:Nginx 1.18 、MySQL5.5、Tomcat7

    image-20210121212105674

    image-20210121212128837

    image-20210121212212932

    image-20210121212249156

    在安装的过程中,我们去配置一下端口。在防火墙下方填写端口、及说明点击添加放行端口。

    注意,此处选择默认的放行端口,别选错了

    一共12个端口,自己数数对不对

    image-20210121231154245

    image-20210121231208159

    以上操作完毕后,我们进入下一步:上传代码并配置

    2.2 上传代码

    选择左侧“文件”,找到tomcat->webapps ,将后端代码和前端代码上传到这个位置。

    image-20210121225058733

    image-20210121225720547

    上传完成后,在webapps目录中就可以看到这两个文件啦

    image-20210121225613312

    2.3 数据库配置

    在宝塔系统中选择数据库→root密码,密码改成root,提交。

    image-20210122130523141

    image-20210122130549751

    Linux指令指南:
    ls查看当前目录有哪些文件
    
    cd … 返回上一级
    
    cd 文件名 去往哪个文件夹(按tab键可以快速补全)
    

    打开命令提示符cmd,进入Linux系统。

     ssh root@你的服务器公网ip
    

    image-20210122130838002

    输入命令mysql -uroot -p,再输入完密码后即可进入终端的操作界面了。密码为宝塔中设置的密码root。

    输入命令show databases;可以看到已经存在的数据库

    再输入命令

    create database `mydb` default character set utf8 COLLATE utf8_general_ci
    

    注意:mydb肩膀上要有符号`

    image-20210122123222892

    通过命令show databases;就可以看到新的数据库已经创建成功了

    image-20210122131550079

    接下来就是将.sql文件放入该数据库中了。首先退出数据库exit;然后进入mydb.sql文件所在的目录中,我的是/www/server/tomcat/webapps/vueShop-api-server/db,之后是在该目录下进入数据库,即mysql -uroot -p 进入刚才创建的数据库mydb中use mydb,使用命令show tables;可以看到此时数据库中没有任何的表;我们使用命令source /www/server/tomcat/webapps/vueShop-api-server/db/mydb.sql;`即可在该数据库中创建表了。

    image-20210122131717926

    image-20210122131747039

    image-20210122131806434

    等待数据和表上传完成再次使用命令show tables;可以看到此时的数据库中出现的表,这就完成了本地数据库上传到服务器上的所有操作了。

    image-20210122131930458

    接下来回到宝塔系统,选择左边栏的数据库,再在显示页面中选择从服务器获取,出现mydb数据即表示成功

    image-20210122123516667

    2.4 启动node服务

    首先看看有没有npm

    npm -v
    

    image-20210121232209652

    此时显示没有,那我们首先要去安装一个nodejs~可以在下面链接自己找版本进行安装,也可以使用我的版本。

    nodejs安装包 网站

    附上CenOS安装nodejs的一个博客链接

    CenOS安装nodejs的4种方法

    //进入root目录
    cd /root
    
    //下载安装包
    wget http://nodejs.org/dist/v12.18.2/node-v12.18.2-linux-x64.tar.gz
    

    image-20210121235055648

    等待安装包下载完成~执行以下命令解压

    sudo tar --strip-components 1 -xzvf node-v* -C /usr/local
    

    解压完成之后,执行一下代码,查看是否安装成功

    node --version
    

    实现v…说明安装成功了

    image-20210122001416707

    回到api文件夹,并使用npm install 安装依赖包,依赖包安装完成后,执行app.js

    //回到api文件夹
    cd /www/server/tomcat/webapps/vueShop-api-server
    
    //安装依赖包
    npm install
    
    //执行,
    node app.js
    

    image-20210122001505722

    如果在执行npm install的时候报错,npm WARN deprecated,有可能是你的node版本太低了,去上面的链接找一个距离你当下时间较近的安装包下载
    

    但上面的app.js执行后,一旦关闭cmd窗口,后端接口就失效了,如何让node app的程序一直运行?

    解决方法:

    首先我们推出app.js执行,按ctrl + c

    1.安装forever

    //进入local目录
    cd /usr/local
    
    //安装
    forever start app.js
    
    

    image-20210122132708663

    2.使用forever开启nodejs程序

    cd /www/server/tomcat/webapps/vueShop-api-server
    
    forever start app.js
    
    

    image-20210122132748105

    出现Forever processing file: app.js说明已经成功运行。

    2.5 nginx配置并启动

    点击软件商店,找到Nginx点击设置

    image-20210122001615465

    点击配置修改,增加下面代码:

     server{
         listen 80;
         server_name localhost 118.31.171.210;
         location / {
             root /www/server/tomcat/webapps/dist;
             try_files $uri $uri/ /index.html;
         }
     }
    

    其中listen为网页接口,server_name中的Id为你的服务器外网ip,location的root为dist文件夹位置,其他和我一样就好

    特别注意!!!这一段代码是加在http中的,不要往下滑!!!不要加到下面的server中。这是我踩过的坑

    image-20210122132955011

    配置完之后,选择保存。

    回到服务,先点击重新配置,在点击重启

    image-20210122133246250

    如果此时运行失败,出现:bind() to 0.0.0.0:80 failed (98:Adress already in use)错误,是由于端口号被占用。

    解决:

    进行cmd命令行

    //查看端口
    netstat -ntlp
    

    image-20210122004905072

    找到80的Pid

    //杀掉进程
    kill 19016
    

    image-20210122005009466

    重新查看

    netstat -ntlp
    

    image-20210122005041540

    解决。

    在宝塔中重新点击重启即可。

    如果成功的话,浏览器访问就能进入你的项目啦:(http://服务器的IP:80)

    image-20210122133757733

    image-20210122123625369

    到此,我们的项目就成功部署上线啦有任何问题,都可以在评论区说出来~,你遇到的问题我基本都遇到过,因为踩了太多坑了呜呜呜。

    总结

    整理不易,若对您有帮助,请点个赞,给个star,您的支持是我更新的动力 👇

    📖本项目开发全过程博客记录

    🐱 GitHub笔记

    🐱 本项目Github源码

    各位看官老爷们希望能给我的Github一个star~~~为了整理这个纯小白部署上线教程,我又重新购买了一个服务器,从头弄了一遍,看在这个份上可怜可怜小人把呜呜呜呜。

    展开全文
  • 1.1 电商项目基本业务概述 根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式,我们主要是实现PC后台管理系统。 1.2 电商后台管理系统的功能 电商后台管理系统...
  • 最新vue+vant移动端电商项目

    千次阅读 热门讨论 2021-02-16 19:56:43
    今天为大家带来一个Vue+VantUi完成的一个一个移动端电商项目,供大家学习和参考. 源码已上传到码云上面https://gitee.com/jiuyueqi/vyx,如果有需要源码或者接口文档的欢迎评论区留言,看到后会第一时间进行回复!!! ...
  • 用webstorm打开我们的前端项目online-store,重点关注src。 api:我们请求网络的一些api,所有组件的api都是通过这个来配置的。 axios:里面是一些全局拦截。 components:是一些基础的组件。 router:是vue-...
  • Gerapy项目的结构:Vue+Django独立开发电商项目 . ├── client/ # 前端(客户端),vue项目。该文件夹不包含在上线项目中。 │ ├── build/ │ ├── server/ │ ├── src/ # 前端源码 │ │ ├── App....
  • 页面:Vue.js vue前端页面地址:https://github.com/zhua-an/adminUI.git 项目目的: 学习spring cloud的知识,总结java常用技术 集成常用的工具或模块,在工作中遇到类似功能,可拿来即用 模拟工作常见的场景,...
  • own_shop_vue 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 项目是github上开源的一套电商源码,基于最新的技术,spring cloud和vue全家桶,有mq,redis,nginx,安全验证框架等,新的流行技术
  • 毕业设计电商网站源码 EasyStudy 综合性信息 W3school 是 Web 技术教程,可以找到你所需要的全面网站建设教程,讲解方式简单易懂,适合入门。 一个与时俱进的软件开发教程网站 前端工程师手册,最近更新 5 年前。...
  • vue_shop 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 果酱小店开源电商系统是一个模块化的 B2C 社交电商系统,基于当下最热门的开源技术进行构建,后端基于 PHP 框架 Laravel,前端基于微信小程序,vue.js,实现完全的前后端分离。 该产品数年来服务于包括美资500强...
  • 基于Vue开发的电商APP项目——蘑菇街项目源码:https://github.com/Limna777/Shopmall.git1、项目描述2、使用的插件或第三方库3、页面主要实现的功能1、首页2、应用分类3、购物车4、个人中心4、基本目录5、项目截图 ...
  • 想起上学期利用课余时间学习了vue , node.js ,一直想做个完整的项目实战一下,但之前在学校并没有那么多的时间。现在恰好有时间,就想着做一个项目巩固之前学到的东西。 本项目前逐步分离,这是项目的一部分,前端...
  • ddBuy是一个移动端开源电商项目,它基于和实现。使用了最新的Vue全家桶技术栈,以及一些优秀的开源库如, , , ,后台数据通过构造。支持多语言国际化,相信不管你是处于该段位的攻城狮,本项目都能帮助到你。 V...
  • 基于springboot和spring cloud实现的分布式全品类电商项目 项目分为3个项目 1. --客户端门户 2. --后台管理系统(前端) 3. --后台微服务(11个服务) 1、门户网站 门户系统面向的是用户,安全性很重要,而且搜索引擎...
  • 基于vue和koa的购物中心应用程序项目 效果预览 项目说明 本项目是参考视频教程的,教程地址 教程讲师技术胖的Github地址 项目内置的技术栈vue axios vue-router vant koa2 mongodb 本项目基于vuecli@3.0构建,路由...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 192
精华内容 76
关键字:

vue电商项目源码

vue 订阅