基于vue2+nuxt构建的高仿饿了么(2018版)

    基于vue2+nuxt构建的高仿饿了么(2018版)

    • 商品编号:
      #44261505_688
      • 原价:
        免费
      • 会员价:
        免费
    • 版本:
      • V1.0.0
      • V2.0.0
    • 数量:
      库存(不限)

    购物车中已存在此商品,请在购物车中操作单击跳转购物车

    • 开发者:easytuan
    • 版本工具管理:GitHub
    • 开发环境:VisualStudio Code
    • 开发语言:vue2+nuxt/ node.js + mongodb
    • 源码架构:B/S
    • 开源协议:BSD协议
    • 编码格式:UTF-8
    • 数据库:无

    前言

    高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习

    效果演示

    查看demo请戳这里(请用chrome手机模式预览)

    移动端扫描下方二维码


    API接口文档

    接口文档地址(基于apidoc)

    技术栈

    vue2 + vuex + vue-router + mint-ui + nuxt

    项目运行

    git clone git@github.com:EasyTuan/nuxt-elm.git
    
    # 国内镜像加速节点:git@gitee.com:easytuan/node-elm-api.git
    
    cd nuxt-elm
    
    npm install
    
    npm run dev
    
    #模版快速生成
    npm run tep `文件名`
    
    # pm2部署
    npm run start

    补充

    此项目有配套的后台系统,如果想体验前后台同时开发,可以下载对应的后台系统

    如果只做前端开发,请忽略这句话。

    目标功能

    • [x] 商家列表 -- 完成
    • [x] 购物车功能 -- 完成
    • [x] 餐馆食品列表页 -- 完成
    • [x] 店铺评价页面 -- 完成
    • [x] 商家详情页 -- 完成
    • [x] 登录、注册 -- 完成
    • [x] 修改密码 -- 完成
    • [x] 个人中心 -- 完成
    • [x] 红包 -- 完成
    • [x] 收货地址 -- 完成

    业务介绍

    目录结构

    ├── assets               // 静态资源
    │   ├── images                // 图片资源
    │   ├── services              // api请求
    │   ├── styles                // 样式文件
    │   └── utils                 // 常用工具类
    ├── components           // 组件
    ├── config
    │   └── index.js              // 配置文件
    ├── layouts              // 布局
    ├── middleware           // 中间件
    ├── pages                // 页面
    ├── plugins              // 插件
    ├── static               // 静态资源
    └── store                //vuex状态树

    部分截图展示

    首页展示



    个人资料



    我的



    订餐


    商家评价



    开发日常记录

    nuxt模版搭建

    这里关于项目初始化,我是直接使用的 Nuxt 官网提供的 starter 模板

    
    # 安装 vue-cli
    npm install -g vue-cli
    
    # 初始化项目
    vue init nuxt-community/starter-template nuxt-ssr-demo
    
    # 安装依赖
    cd nuxt-ssr-demo
    npm install
    
    # 启动本地服务
    npm run dev
    

    访问 http://localhost:3000 ,现在我们来看下初始化好的项目目录

    
    ├── assets                      // 静态资源
    ├── components                  // 全局组件
    ├── layouts                     // 页面布局
    ├── middleware                  // 中间件
    ├── pages                       // 路由页面
    ├── static                      // 静态资源,打包文件名不会被hash
    ├── store                       // vuex
    ├── nuxt.config.js              // nuxt配置文件
    ├── package.json
    ├── README.md
    

    注意:nuxt默认会读取pages里面的vue文件,自动生成路由,如需要自定义路由,可在nuxt.config.js中配置对应参数。

    request请求封装

    数据和展示层的剥离是有必要的,这也是为什么前端都提倡MV*的设计模式,而对request请求封装是我们第一步要完成的。这里我选了axios作为HTTP请求客户端,axios兼容浏览器端和node端,同时提供了请求拦截、响应拦截等让我们开发更加愉快的功能。

    在 config/index.js 中写入:

    
    const json = require('../package.json');
    const port = json.config.nuxt.port;
    
    module.exports = {
      IS_RELEASE: true, // true线上,false测试
    
      BASE_URL: `http://localhost:${port}/api`, // 测试
    
      // BASE_URL: `https://elm.caibowen.net/api`, // 生产
    
      // IMG_URL: 'http://localhost:9000/', // 测试
    
      IMG_URL: 'https://easytuan.gitee.io/node-elm-api/public/', // 生产(使用码云Gitee Pages 服务)
    
      HEADERS: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    
      TIMEOUT: 12000, // api超时时间
    
    };
    

    在 assets/utils/request.js 中写入:

    
    import axios from 'axios';
    import config from '~/config';
    import { Toast } from 'mint-ui';
    
    axios.defaults.baseURL = config.BASE_URL;
    axios.defaults.timeout = config.TIMEOUT;
    axios.defaults.headers = config.HEADERS;
    
    // 请求拦截器
    axios.interceptors.request.use( request => {
      if (!config.IS_RELEASE) {
        console.log(
          `${new Date().toLocaleString()}【 M=${request.url} 】P=`,
          request.params || request.data,
        );
      }
      return request;
    }, error => {
      return Promise.reject(error);
    });
    
    export default async (options = { method: 'GET' }) => {
      let isdata = true;
      if (
        options.method.toUpperCase() !== 'POST'
        && options.method.toUpperCase() !== 'PUT'
        && options.method.toUpperCase() !== 'PATCH'
      ) {
        isdata = false;
      }
      const res = await axios({
        method: options.method,
        url: options.url,
        data: isdata ? options.data : null,
        params: !isdata ? options.data : null,
      });
      if (res.status >= 200 && res.status < 300) {
        if (!config.IS_RELEASE) {
          console.log(
            `${new Date().toLocaleString()}【接口响应:】`,
            res.data,
          );
        }
        // 浏览器环境弹出报错信息
        if(typeof window !== "undefined" && res.data.code !== 0) {
          Toast(res.data.msg);
        }
        return res.data;
      }else {
        if(typeof window !== "undefined" && res.data.code !== 0) {
          Toast('请求错误');
        }
      }
    
    };
    

    最后所有api请求都写进server.js文件,方便统一管理。

    跨域处理

    使用过 vue 的同学,肯定知道对于项目中的跨域,vue-cli 对 webpack 中的 proxy 选项进行了一层封装。它暴露出来的是一个叫 proxyTable 的选项,是对 webpack 中的 proxy 和其三方插件 http-proxy-middleware 的一个整合。

    不幸的 Nuxt 中没有 proxyTable 这么一个配置项来进行跨域的配置。当然幸运的是,在 Nuxt 中你可以直接通过配置 http-proxy-middleware 来处理跨域。更幸运的是 Nuxt 官方提供了两个包来处理 axios 跨域问题。

    首先,进行安装

    npm i @nuxtjs/axios @nuxtjs/proxy -D

    然后在 nuxt.config.js 文件里进行配置

      modules: [
        '@nuxtjs/axios',
        '@nuxtjs/proxy'
      ],
      proxy: [
        [
          '/api',{
            // target: 'http://localhost:9000',
            target: 'https://elm-api.caibowen.net',
            changeOrigin: true,
            pathRewrite: { '^/api' : '/' }
          }
        ]
      ],

    然后你就可以安心使用你的 axios 进行跨域请求了

    项目部署

    到这一步的同学,你得先确保你拥有一个自己的服务器。如果没有的话,赶紧去买一个(我不会和你说AWS和google云有提供免费一年的云服务器试用)

    OK,文章继续。在进行部署讲解前,我们先看一下 Nuxt 提供的几个命令

    命令描述
    nuxt启动一个热加载的 Web 服务器(开发模式) localhost:3000
    nuxt build利用 webpack 编译应用,压缩 JS 和 CSS 资源(发布用)
    nuxt start以生成模式启动一个 Web 服务器 (nuxt build 会先被执行)
    nuxt generate编译应用,并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)

    开始部署

    上传代码到服务器,然后执行命令nuxt build && nuxt start 监听3000端口。
    接下来,开始配置你的 nginx (用于端口转发)

     server {
      # 端口,http为 80,如果部署了https请监听 443
      listen 80;
      # 域名
      server_name elm.caibowen.net;
      # 反向代理
      location / {
        proxy_pass http://localhost:3000;
      }
    }

    然后重启 nginx

    nginx -s restart

    然后你就能在 http://elm.caibowen.net 访问到你的网站啦

    最后

    对于 Nuxt,在使用层面,是比较简单、好上手的。相对 vue-ssr 来说,它大大的简化了开发的配置,让开发人员可以只需思考业务的开发,而不用太去担心文件的配置。其中 Nuxt 通过监听 pages 目录文件变更并自动生成路由更是直接省去了我们平常对于路由的配置。

    但是,目前 Nuxt 整体还是有待提高的,目前社区相关的三方插件比较有限,市面上相关的参考资料也相对比较少。

    不管如何,希望 Nuxt 社区可以越来越好吧 ~









    权利声明:本站所有商品信息、客户评价等信息是初心商城重要的数据资源,未经许可,禁止非法转载使用。 注:本站商品信息均来自初心商城,其真实性、准确性和合法性由初心商城负责。

                    初心源说明:初心商城主要为程序员提供开发基础的代码源以及成熟项目,网站中所有的商品有提供收费版本的, 也有提供免费版本的,按照大家各自不同的需求进行购买。实实在在的让程序员只用专注于自己的业务实现你的小梦想, 如果您对我们的成果表示认同并且觉得对你有所帮助我们愿意接受来自各方面的支持^_^。

                    支持:用手机扫描二维码支付

                    支付宝支持我们 微信支持我们

                    您的支持将被用于:
                    1、持续深入的上传更多更好的源代码
                    2、建立更加完善的技术社区
                    3、完善现在系统出现各种问题
                    4、购买域名和租赁服务器

                    1、交易规则

                    2、发货方式

                    1、自动:在上方保障服务中标有自动发货的商品,拍下后,将会自动收到来自卖家的商品获取(下载)链接

                    2、手动:在上方保障服务中标有手动发货的商品,拍下后,卖家会收到邮件,也可通过QQ或订单中的电话联系对方。

                    3、退款说明

                    1、描述:源码描述(含标题)与实际源码不一致的(例:描述PHP实际为ASP、描述的功能实际缺少、版本不符等)

                    2、演示:有演示站时,与实际源码小于95%一致的(但描述中有"不保证完全一样、有变化的可能性"类似显著声明的除外)

                    3、发货:手动发货源码,在卖家未发货前,已申请退款的

                    4、服务:卖家不提供安装服务或需额外收费的(但描述中有显著声明的除外)

                    5、其它:如质量方面的硬性常规问题等

                    备注:经核实符合上述任一,均支持退款,但卖家予以积极解决问题则除外。交易中的商品,卖家无法对描述进行修改!

                    4、注意事项

                    1、客户买完之后未确认收货,将不会收到下载地址和下载码,确认收货之后才能收到下载地址和下载码。

                    2、在未拍下前,双方在QQ上所商定的内容,亦可成为纠纷评判依据(商定与描述冲突时,商定为准);

                    3、在商品同时有网站演示与图片演示,且站演与图演不一致时,默认按图演作为纠纷评判依据(特别声明或有商定除外);

                    4、在没有"无任何正当退款依据"的前提下,写有"一旦售出,概不支持退款"等类似的声明,视为无效声明;

                    5、虽然交易产生纠纷的几率很小,但请尽量保留如聊天记录这样的重要信息,以防产生纠纷时出现问题不明确的情况。

                    5、交易声明

                    1、本站作为直卖平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益;

                    2、非平台线上交易的商品,出现任何后果均与本站无关;无论卖家以何理由要求线下交易的,请联系管理举报。

                    初心Logo

                    初心商城| 初心系列| 初心博客| 版本历史| 系统反馈

                    © 2016-2019 山西米立信息技术有限公司 保留所有权利 京ICP备16055626号
                    违法和不良信息举报电话:186-2950-9347,本网站所列数据,除特殊说明,所有数据均出自我工作室
                    本网站兼容所有主流浏览器,不支持手机自适应

                    返回顶部小火箭