Vue基础入门(四):Vue3快速开发模板

快速开发Vue的解决方案

​ Vue 的开发需要的 node 环境,其实上在开发的过程中会遇到一些你想不到的问题,比如 npm工具的版本和 node 环境不匹配(你把其他项目导入到自己的环境)

​ vue-element-admin(是一个官方提供的现成的项目) 是一个后台前端解决方案,它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。

​ vue-element-admin 定位是后台集成方案,不太适合当基础模板来进行二次开发,因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。

​ 官方还提供了一套基础模板 vue-admin-template ,我们基于它进行二次开发,想要什么功能或者组件就去
vue-element-admin 那里复制过来。

一、克隆项目二次开发

1.1 下载安装 git 工具

​ 下载并安装 Git ,傻瓜式安装即。下载地址 https://git-scm.com/download

在这里插入图片描述

1.2 克隆 vue-element-admin

(也可以通过直接解压 vue-element-admin项目压缩包,然后进行二次开发)

​ 克隆 vue-element-admin 项目与安装依赖

git clone https://github.com/PanJiaChen/vue-element-admin.git

git clone https://gitee.com/panjiachen/vue-element-admin.git

解决下载满的问题: 这里设置下载源地址

npm config set registry https://registry.npm.taobao.org

  • 进入项目目录: cd vue-element-admin
  • 安装项目依赖: npm install

依赖下载慢解决办法:npm install --registry=https://registry.npm.taobao.org

  • 本地开发启动项目: npm run dev

      克隆下载完成之后,我们CD 进行项目根目录,然后启动项目 **npm run dev**
    
      启动完成后会自动打开浏览器访问 http://localhost:9527,你看到如下页面就代表成功了。
    

在这里插入图片描述

​ 我们把 vue-element-admin 当做后台集成方案,然后在 vue-admin-template 的基础上进行二次开发,想要什么功能或者组件就去 vue-element-admin 那里复制过来,所以我们在克隆vue-admin-template 到本。

1.3 克隆 vue-admin-template

​ (也可以通过直接解压 vue-element-admin项目压缩包,然后进行二次开发)

​ 克隆 vue-admin-template 项目与安装依赖

git clone https://github.com/PanJiaChen/vue-admin-template.git

git clone https://gitee.com/panjiachen/vue-admin-template.git

  • 进入项目目录:cd vue-admin-template
  • 安装依赖:npm install
  • 本地开发,启动项目:npm run dev

浏览器访问 http://localhost:952

在这里插入图片描述

1.4 目录结构

​ 本项目已经生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。

在这里插入图片描述

  • build —— 与项目的构建相关的配置
  • mock —— 项目模拟前端数据的(模拟假数据)
  • public —— 公共的静态资源
    • favicon.ico —— favicon图标
    • index.html —— html模板
  • src —— 源代码目录
    • api —— 所以的自定义的js文件存储
    • assets —— 公用的静态资源(比如图标、字体等资源都可以放这里)
    • component —— 全局公用组件
    • icons —— 图标
    • lang —— 国际化资源存储
    • layout —— 全局的样式布局(每个页面的头部和尾部信息)
    • router —— 路由
    • store —— 全局状态管理 vuex 数据存储中心(数据包括了 data 和函数),里面的数据可以项目的所有组件共享
    • styles —— 全局样式
    • utils —— 全局公用的工具组件
    • views —— 所有的自定义组件
    • App.vue —— 项目的首页
    • main.js —— 入口文件 加载组件、初始化vue实例等
    • permission.js —— 权限管理(如果项目中有权限管理的功能就要使用到该文件)
  • tests —— 测试
  • .env.xxx —— 环境变量配置
  • .eslintrc.js —— elint配置项
  • .babelrc —— babel = loader 配置
  • .travis.yml —— 自动化CI配置
  • vue.config.js —— vue =lic 配置
  • postcss.config.js —— postcss配置
  • package.json —— package.json (记录依赖信息,像maven中的 pom.xml文件)

二、Vue快速开发模板的基本调整

​ 在原有的项目的基础上我们要对项目做一些基本的调整 ,比如修改 logo 之类的操作等。

2.1 项目重命名

​ 重命名项目名字,需要搭配package.json 文件中去修改。

在这里插入图片描述

​ 如果项目中有 package-lock.json 文件则和上面的修改方式一样。

2.2 ElementUI 中文版本

​ vue 的脚手架使用的 EelementUI 组件是英文版本,所以很多提示都是英文的。

在这里插入图片描述

  • 找到 src/main.js 文件,做如下的修改即可:

    在这里插入图片描述

修改element-ui 为中文后的展示效果:

在这里插入图片描述

2.3 Eslint 语法规范检查

​ ESLint 是一个用来按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格,也保证了代码的可读性。

​ 如果不想使用则可以修改 vue.config.js 文件,如下:

在这里插入图片描述

2.4 更改头部 title 和 Logo

​ 在src / sttings.js 中修改页面的 title、固定头部、显示logo

在这里插入图片描述

2.5 修改项目端口号

​ vue项目也有自己的端口号,修改方式是 需要在 vue.config.js文件中修改。

在这里插入图片描述

2.6 替换logo图标

​ 找到 src / layout / index.vue 文件 和 src / layout /components /Sidebar /Logo.vue 文件进行修改。

​ 这里 我们自己先选定好需要替换的logo图片,保存到 src /assets —— 公用的静态资源 文件中,后续直接引用即可。

在这里插入图片描述

修改后效果展示:

在这里插入图片描述

2.7 替换面包屑

​ 面包屑就是指的组件在导航页面前显示的小图标,我们可以通过修改路由的配置文件中进行修改配置 src / router /index.js 文件中,找到对应组件的配置信息模快即可进行修改。

在这里插入图片描述

​ 这里的icon 图标选择,也可以通过 element-ui 官方组件中的图标去选择一个,进行替换即可。

在这里插入图片描述

替换后的效果图:

在这里插入图片描述

三、Vue-admin-element登录流程分析

​ Vue-admin-element 的登陆是非常复杂的,所以暂时你只需要知道登陆的流程就行,不用去追究每一行代码。

​ 通过下面几个文件的分析观察,整理Vue-admin-element 二次开发模板的登录流程。

3.1 store仓库中心

​ store —— 全局状态管理 vuex 数据存储中心(数据包括了 data 和函数),里面的数据可以项目的所有组件共享。

在这里插入图片描述

3.2 观察 src/main.js 文件

​ main.js —— 入口文件 加载组件、初始化vue实例等。 main.js 文件中导入了 store 模快。在这里插入图片描述

3.3 登录组件代码

​ views —— 所有的自定义组件

第一步:观察在 src / views / login / index.vue 自定义组件下的login文件夹中的 index.vue 自定义组件中的核心代码。

在这里插入图片描述

3.4 store仓库中的user.js

​ 第二步找到 store / modules / user.js 的核心代码。该user.js 文件中定义了两种类型的方法,分别是定义在 mutations{} 中定义的方法和 actions{} 中定义的方法。

​ 其中 mutations 中定义了 四个方法分别是 RESET_STATE、SET_TOKEN、SET_NAME、SET_AVATAR。

在这里插入图片描述

在 actions 中定义的方法有 login、getInfo、logout、resetToken 在这里插入图片描述

注:store 是数据的仓库中心,里面定义的两类方法,一类定义在 actions 中(这里的方法通过$store.dispatch(‘user/login’,参数) 的方式出发),一类定义在 mutations 中(这里的方法通过 commit(‘SET_TOKEN’, data.token) 方式进行触发)。

3.5 src/utils/auth.js 文件

​ 在src/store/modules /user.js 文件中也引入了 src/utils/auth.js 文件中的三个方法。

import { getToken, setToken, removeToken } from '@/utils/auth'

​ 这里来观察一下 该文件下的这几个方法,都是对token的操作方法。

import Cookies from 'js-cookie'

//这里存储到浏览器 和 在浏览器中取token的key都是一样的
const TokenKey = 'vue_admin_template_token'

export function getToken() {  
  return Cookies.get(TokenKey)
}

export function setToken(token) {//user.js中的登录方法中存储token到浏览器时调用的方法
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

3.6 src/api/user.js 文件

​ 在src/store/modules /user.js 文件中也引入了 src/api/user.js 文件 中的 login、getInfo、loginOut 三个方法。

在这里插入图片描述

3.7 src/utils/request.js 文件

​ 在上面的 user.js 文件中引入了 我们的该文件,来进行axios 异步请求的发送,下面来看一下我们 request.js 文件中的详细内容。

在这里插入图片描述

通过上面几个文件的分析,可以大致的看出来整个登录过程中,所涉及的相关文件内容。

在这里插入图片描述

四、结合后端实现登录

4.1 后端Controller层代码

​ 这里需要注意,我们的请求路径、请求接口参数命名必须都要与前端相对于

package cn.example.springbootproject.tempTestVue;

import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Description: 测试Vue登录实现的控制层
 * @ClassName: VueLoginController
 */
@RestController
@CrossOrigin
@RequestMapping("vue-admin-template/user")
public class VueLoginController {
    /**
    * 这里就不在调用Service层代码去数据库中查询,这里简单的写死数据进行调用测试
    * */
    @PostMapping("login")
    public Object login(@RequestBody  Map<String,Object> data){
        System.out.println("访问login");
        System.out.println("username = " + data.get("username"));
        System.out.println("password = " + data.get("password"));
        String userId = "2013";
        if (userId==null) {
            return "fail";
        }
        HashMap<String, String> map = new HashMap<>();
        map.put("token",userId);
        return map;
    }

    @GetMapping("info")
    public Object getInfo(@RequestParam String token){
        System.out.println("访问info  token="+token);
        HashMap<Object, Object> map = new HashMap<>();
        map.put("username","张三");
        map.put("password","123456");
        map.put("name","二狗子");
        map.put("id","2013");
        map.put("phone","133144");
        map.put("avatar","xxxxx头像!");
        map.put("address","地址位置");
        return map;
    }

    @GetMapping("list")
    public Object userList(){
        System.out.println("访问list");
        HashMap<String, Object> map = new HashMap<>();
        List<Map> list = new ArrayList<>();
        for (int i=0;i<5;i++){
            Map aclUser = new HashMap<>();
            aclUser.put("userName","张三-"+i);
            aclUser.put("password","123456");
            aclUser.put("nickName","二狗子-"+i);
            aclUser.put("gmtCreate","");
            aclUser.put("gmtModified","");
            list.add(aclUser);
        }
        map.put("items",list);
        return map;
    }

    @PostMapping("/logout")
    public Object loginout(){
        System.out.println("退出登录!!!");
        return null;
    }
}

4.2 调整前端访问路径

  • 在文件 src/utils/request.js文件
// create an axios instance
const service = axios.create({
  //指定了我们要访问的后端的路径(比如说 htppt://localhost:8080
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

​ 在该配置项中的 VUE_APP_BASE_API 指定了我们的访问路径,该数据是通过配置文件中获取 .env.production(生成环境) 或者是 **.env.development(开发环境) ** ,具体根据那个文件中获取的,的根据自己项目的实际部署环境来确定。

​ 同时 我们将下方的 response interceptor(响应拦截器)部分的内容全部注释掉,暂时不使用到响应拦截器相关的操作。注释时,不要注释多了,末尾的 export default service 是需要保留的。

  • 调整 .env.development 配置文件中的路径内容
# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8888'

​ 这里的路径根据自己后端路径进行调整更改。

​ **注:**需要主页我们的请求参数一定要与后端接收参数对应,以及前端接收参数,一点要与响应参数响应参数相匹配,下面两个文件中就需要与后端相应参数对应。

  • src/store/modules/user.js 文件中注意的点

在这里插入图片描述

  • src/api/user.js 文件需要注意的点

在这里插入图片描述

4.3 测试结果

​ 调整好后端代码之后,第一次登录可以观察到如下结果:

在这里插入图片描述

​ 可以观察到前端保存了我们的token信息:

在这里插入图片描述

​ 在浏览器端存在token信息的时候,我们重写访问登录页面首页时,前端会直接通过获取到的token信息,进行调用后端的 getInfo() 方法来获取用户信息,从而跳过了登录操作。

​ 当token不存在时(这里我们可以人为的删除存储在浏览器端的该token数据),在进行其他操作时,会跳转到登录界面,这里就相当于我们的用户登录过期了,就需要重新进行认证操作。

在这里插入图片描述

五、项目部署上线操作

5.1 后端项目部署

  1. 后端项目打包jar文件

在这里插入图片描述

  1. 将打包好的jar文件上传到服务器中

    注意这里,我用的是Linux环境,前提是我们的Linux环境已经安装了JDK1.8。

    • 启动项目:

    nohup java -jar vue-admin-0.0.1-SNAPSHOT.jar -&

    或者

    nohup java -jar 项目名称.jar --server.port=项目端口号 do_iptable.jar >/dev/null 2>&1&

    • 放行防火墙中的项目端口号

    firewall-cmd --add-port=项目端口号/tcp --permanent
    firewall-cmd --reload

    在这里插入图片描述

    ps -ef|grep java --查看进程执行情况。

    • 测试访问部署项目

    在这里插入图片描述

5.2 前端代码部署

  1. 将前端vue项目打包上传

    • 修改项目axios异步请求访问地址在这里插入图片描述

    • 前端vue项目打包

      npm run build:prod

      在这里插入图片描述

      打包过程可能会出现错误;Vue 报错error:0308010C:digital envelope routines::unsupported,可以在终端先执行: export NODE_OPTIONS=–openssl-legacy-provider 或者是在vue项目中的 package.json 配置相关信息:

      在这里插入图片描述

      打包成功之后,项目根目录中会增加一个 dist 文件夹。我们需要将该文件夹,上传到服务器中。

    在这里插入图片描述

    ​ vue 项目—>npm run build:prod—>dist–>上传到 linux

5.3 配置 nginx 访问

​ 这里需要自己提前先将 niginx 服务部署到我们的服务器中,这里就不单独讲解 nginx 服务的部署流程了。

  • 配置nginx访问:

    vim /user/local/nginx/comf/nginx.conf --修改Nginx的配置文件

    添加下面配置,实现nginx访问项目。

            #location / {
                #    root   html;
                #    index  index.html index.htm;
            #}
    		
            location /{
                root	/usr/local/java/dist; #前端项目打包 dist文件保存地址
                try_files $uri $uri/ /index.html;
                index index.html index.htm;
            }
            location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://localhost:8888/;
            }
    
  • 重新启动 nginx服务操作

    在这里插入图片描述

  • 访问项目

    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/195336.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu系统CLion安装

Ubuntu系统CLion安装 pycharm 同理。 参考官网安装过程&#xff1a;官网安装过程 下载linux tar.gz包 # 解压 sudo tar -xzvf CLion-*.tar.gz -C /opt/ sh /opt/clion-*/bin/clion.sh其中第二个命令是启动CLion命令 clion安装完以后&#xff0c;不会在桌面或者菜单栏建立图…

Containerd Container管理功能解析

Containerd Container管理功能解析 container是containerd的一个核心功能&#xff0c;用于创建和管理容器的基本信息。 本篇containerd版本为v1.7.9。 更多文章访问 https://www.cyisme.top 本文从ctr c create命令出发&#xff0c;分析containerd的容器及镜像管理相关功能。 …

[英语学习][3][Word Power Made Easy]的精读与翻译优化

[序言] 这次翻译校验, 难度有点大, 原版中英翻译已出现了严重地偏差. 昨晚11点开始阅读如下段落, 花费了1个小时也没有理解原作者的核心表达, 索性睡觉了. 今早学习完朗文单词之后, 9点半开始继续揣摩. 竟然弄到了中午11点30, 终于明白原作者要表达的意思了. 废话不多说&#x…

Selenium 学习(0.14)——软件测试之测试用例设计方法——因果图法2【基本步骤及案例】

1、因果图法的基本步骤 2、案例分析 1&#xff09;分析原因和结果 2&#xff09;关联原因和结果 投入1元5角或2元&#xff0c;按下“可乐”&#xff0c;送出“可乐”【暂时忽略找零】 投入2元&#xff0c;按下“可乐”或“雪碧”。找零5角&#xff0c;送出“可乐”或“雪…

大量用户弃用5G网络,四大运营商血亏? 喜闻乐见

家人们&#xff0c;老百姓讨厌5G网络&#xff0c;不是一天两天的事情了&#xff0c;有人认为5G网络是个坑&#xff0c;我们就应该永远用4G网络才对&#xff0c;国家为何要折腾这事&#xff1f;肯定是闲的。 正是这种思维的蔓延&#xff0c;导致了大量用户弃用5G网络。这事对四大…

搭建Angular并引入NG-ZORRO组件库

作者&#xff1a;baekpcyyy&#x1f41f; 1.安装node.js 注&#xff1a;安装 16.0 或更高版本的 Node.js node官网&#xff1a;https://nodejs.org/en 2.进入angular官网 https://angular.cn/guide/setup-local 新建一个文件夹 vsc打开 打开终端 1.首先安装angular手脚架…

高级/进阶”算法和数据结构书籍推荐

“高级/进阶”算法和数据结构书籍推荐《高级算法和数据结构》 高级算法和数据结构 为什么要选择本书 谈及为什么需要花时间学算法&#xff0c;我至少可以列举出三个很好的理由。 (1)性能&#xff1a;选择正确的算法可以显著提升应用程序的速度。仅就搜索来说&#xff0c;用二…

Python基础语法之学习input()函数

Python基础语法之学习input函数 前言一、代码二、效果 前言 一、代码 # 默认是字符串类型 number input("请输入一个数字&#xff1a;") print("输入的数字是",number)二、效果 没有人可以阻止你成为自己想成为的人&#xff0c;只有你自己才能放弃梦想。…

WinMerge使用教程,WinMerge下载

一、下载 官方下载 WinMerge - You will see the difference… 官方地址&#xff1a;https://winmerge.org/ 阿里云盘下载 文件内容对比工具WinMerge2.16.25.25 https://www.alipan.com/s/r7MzudB235x 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘…

机器视觉:塑造未来的智能视界

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; IT杂谈 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1; 前言&#x1f324;️ 机器视觉技术的实现☁️ 图像采集☁️ 图像处理☁️ 数据建模☁️应用展示…

94.STM32外部中断

目录 1.什么是 NVIC&#xff1f; 2.NVIC寄存器 3.中断优先级 4.NVIC的配置 设置中断分组​编辑 配置某一个中断的优先级 5.什么是EXTI 6.EXTI和NVIC之间的关系 7.SYSCFG 的介绍 1.什么是 NVIC&#xff1f; NVIC是一种中断控制器&#xff0c;主要用于处理 ARM Cort…

java--子类中访问其他成员的特点

1.在子类方法中访问其他成员(成员变量、成员方法)&#xff0c;是依照就近原则的。 ①先子类局部范围找。 ②然后子类成员范围找。 ③然后父类成员范围找&#xff0c;如果父类范围还没有找到则报错。 2.如果父类中&#xff0c;出现了重名的成员&#xff0c;会优先使用子类的…

NV040C语音芯片:让自助ATM机使用更加安全快捷

近年来&#xff0c;移动支付方式的兴起、银行加强线上化服务、数字人民币项目推进等因素的影响&#xff0c;人们使用ATM机的频率呈现小幅度的下降趋势。然而&#xff0c;自助ATM机并未从我们的视野中消失&#xff0c;它们仍然在金融领域发挥着重要的作用。未来&#xff0c;ATM机…

Rust内存布局

题图忘了来自哪里.. 整型,浮点型,struct,vec!,enum 本文是对 Rust内存布局 的学习与记录 struct A { a: i64, b: u64,}struct B { a: i32, b: u64,}struct C { a: i64, b: u64, c: i32,}struct D { a: i32, b: u64, c: i32, d: u64,}fn main(…

关于网站的favicon.ico图标的设置需要注意的几点

01-必须在网页的head标签中放上下面的说明&#xff1a; <link rel"shortcut icon" href"/favicon.ico">否则&#xff0c;浏览器虽然能读到图标&#xff0c;但是不会把图标显示在标签上。 02-浏览器会默认到网站根目录中读取文件favicon.ico&#x…

学习笔记-瑞吉外卖项目实战(一)

软件开发整体介绍 软件开发流程 角色分工 软件环境 瑞吉外卖项目介绍 项目介绍 产品原型介绍 技术选型 功能架构 角色 开发环境搭建 数据 创建database reggie&#xff0c;在里面创建表&#xff1a; maven 创建springboot项目并导入相关依赖坐标&#xff1a; 我们可以在项目…

webGL网页游戏的开发步骤

开发基于 WebGL 的网页游戏涉及多个步骤&#xff0c;包括游戏概念的设计、图形资源的创建、编码和调试等。以下是一个一般性的步骤指南&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 确定游戏概念&a…

【办公软件】XML格式文件怎么转Excel表格文件?

首先我们有一个XML格式的文件&#xff0c;例如&#xff1a; 其中的数据是这样的&#xff1a; 我们现在在路径中选中这个XML格式的文件&#xff0c;然后鼠标右键&#xff0c;选择用WPS表格打开后&#xff0c;可见XML格式的文件已经自动转换成了Excel表啦。。。。

CH02_交给子类

Template Method模式 组成模板的方法被定义在父类中&#xff0c;由于这些方法是抽象方法&#xff0c;所以只查看父类的代码是无法知道这些方法最终会进行何种具体处理的。唯一能知道的就是父类如何调用这些方法。 类图 说明 AbstractClass&#xff08;抽象类&#xff09; Abs…

JAVAEE初阶 多线程基础(四)

join的知识补充,线程的状态和线程安全 一.多线程完成运算操作二.多线程代码的变换2.1 转换成串行执行 三.join的参数四.获取线程的引用4.1用this方法获取实例4.2 用currentThread获取实例 五.线程的状态六.线程安全 一.多线程完成运算操作 可以发现,多线程并行比单线程的速度快…