[完结10章]vue3 pinia vite ts 还原高性能外卖app项目 -凯发k8国际

参考资料地址1：https://pan.baidu.com/s/1u0unbmkoa2nrk3n6myb4zg 提取码：tnlt
参考资料地址2：https://share.weiyun.com/wjw3qpeq 密码：gxrfcw

vue3 带来的改变，除了其自身新特性，还有相应的技术栈变化——比如 pinia 将逐渐替代 vuex 。我将在本文中带领大家使用 vue3.2 pinia vite ts 高仿饿了么 web app，帮助大家掌握 vue3“全家桶”技术栈的同时，还掌握前端性能优化的常用方法和巧用设计模式应对复杂应用场景的能力。

网上在线订餐作为手机购物的一种表现形式，采用将图片和文字内容相结合的方式将商品信息展现给用户，这个方式使用户可以查看不同来源的商品信息以及不同层次的信息，以最大程度上了解商品的具体信息，同时可以搜索距离较近的商品信息。

在线订餐客户端市场已经成为移动媒体竞争的焦点，互联网各大门户网站纷纷使出浑身解数希望占领尽可能多的移动在线订餐客户端市场份额。根据数据显示，在中国，在线订餐客户端市场排名前三的客户端分别为美团，饿了么和口碑，其中，这些在线订餐客户端在功能上过于繁重，对android的设备系统版本有一定的要求，没有很好地做到向下兼容低版本，在较低版本的手机无法成功安装这些在线订餐客户端。

通过本案例的学习，我们将能够学习到：
1、工业级项目实现能力
从项目新建、工程化规范、mock server 搭建到基础组件封装、业务组件开发、项目部署贯穿真实项目开发全流程，扫除经验盲区

2、提升业务思维
高保真还原企业级项目开发技术实现与技术原理兼顾并重业务能力与技术深度双重提升

3、收获编程思维
组件化思想全程贯穿高质量项目开发，手敲36 个自研组件，从陌生到熟练，实践高效、易扩展的组件化思想

4、塑造设计思维
对标企业级别代码标准，提高代码质量，能够使用设计模式处理复杂逻辑更自如地应对实际项目中可能遭遇的难题

下面我们就开始代码实战部分：
第一步，项目构建 - 运行前端项目
下载tomcat，解压后运行bin目录的startup，可自定义修改server.xml中的端口号，浏览器访问localhost:[port]
放入前端项目，浏览器访问前端项目。

第二步，引入依赖

io.springfox
springfox-swagger2


io.springfox
springfox-swagger-ui


com.github.xiaoymin
swagger-bootstrap-ui


第三步，创建配置类com.imooc.api.config.swagger2
@component
public class smsutils {

    @autowired
    public aliyunresource aliyunresource;

    public void sendsms(string mobile, string code) {
        defaultprofile profile = defaultprofile.getprofile("cn-hangzhou",
                                                aliyunresource.getaccesskeyid(),
                                                aliyunresource.getaccesskeysecret());
        iacsclient client = new defaultacsclient(profile);

        commonrequest request = new commonrequest();
        request.setsysmethod(methodtype.post);
        request.setsysdomain("dysmsapi.aliyuncs.com");
        request.setsysversion("2017-05-25");
        request.setsysaction("sendsms");
        request.putqueryparameter("regionid", "cn-hangzhou");

        request.putqueryparameter("phonenumbers", mobile);
        request.putqueryparameter("signname", "风间");
        request.putqueryparameter("templatecode", "sms_183761535");
        request.putqueryparameter("templateparam", "{\"code\":\"" code "\"}");

        try {
            commonresponse response = client.getcommonresponse(request);
            system.out.println(response.getdata());
        } catch (serverexception e) {
            e.printstacktrace();
        } catch (clientexception e) {
            e.printstacktrace();
        }
    }
}

浏览器会限制对域名的调用，不同的域名发起请求到不同的接口会出现跨域问题，为了解决这一问题，可以通过springboot来解决，参考如下代码，主要开放限制域名为*，也就是所有进行调用接口。此配置类为项目配置，可以直接放入任何项目中即可使用。
package com.imooc.api.config;

import org.springframework.context.annotation.bean;
import org.springframework.context.annotation.configuration;
import org.springframework.web.cors.corsconfiguration;
import org.springframework.web.cors.urlbasedcorsconfigurationsource;
import org.springframework.web.filter.corsfilter;

@configuration
public class corsconfig {

    public corsconfig() {
    }

    @bean
    public corsfilter corsfilter() {
        // 1. 添加cors配置信息
        corsconfiguration config = new corsconfiguration();
        config.addallowedorigin("*");
        // 设置是否发送cookie信息
        config.setallowcredentials(true);
        // 设置允许请求的方式
        config.addallowedmethod("*");
        // 设置允许的header
        config.addallowedheader("*");
        // 2. 为url添加映射路径
        urlbasedcorsconfigurationsource corssource = new urlbasedcorsconfigurationsource();
        corssource.registercorsconfiguration("/**", config);
        // 3. 返回重新定义好的corssource
        return new corsfilter(corssource);
    }

}

用户一旦登录注册成功，则需要设置会话，由于分布式微服务，使用分布式会话，用户token等信息存入redis。与此同时，在cookie中也需要设置用户的相关信息。
int useractivestatus = user.getactivestatus();
// 如果用户状态已经被封了，则不设置会话与cookie信息
if (useractivestatus != userstatus.frozen.type) {
    // 3. 用户的分布式会话设置
    string uniquetoken = uuid.randomuuid().tostring().trim();
    redis.set(redis_user_token ":" user.getid(), uniquetoken);

    // 4. 用户userid与token放入cookie
    setcookie(request, response, "utoken", uniquetoken, cookie_month);
    setcookie(request, response, "uid", user.getid(), cookie_month);
}

// 5. 用户登录成功则需要删除已经使用过的短信验证码，该验证码只能匹配使用一次，过后作废
//        redis.del(mobile_smscode mobile);

// 6. 用户状态：未激活或者已激活，返回给前端，用于页面跳转
return gracejsonresult.ok(useractivestatus);

本文到此结束，感谢大家的阅读！