vue项目实战(pc端)

最新推荐文章于 2024-05-25 14:11:03 发布
最新推荐文章于 2024-05-25 14:11:03 发布
阅读量3.2k 收藏 37
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45838066/article/details/123722897
版权

相关资料#

  1. 饿了么UI库: Element - The world's most popular Vue UI framework
  2. 项目预览地址: http://nongye.huruqing.cn
  3. 项目demo地址: git@gitee.com:huruqing/nongye-vue-w1206.git
  4. 生产接口地址: http://huruqing.cn:3007
  5. 上课代码地址: git@gitee.com:huruqing/nongye-admin-w1206.git

(一) 下载和运行项目#

(1) pc端:#

  1. 下载项目git clone git@gitee.com:huruqing/nongye-admin-template.git
  2. npm i 安装依赖
  3. npm run serve 运行项目

(2) 服务器端#

01 开发环境#

  1. 下载项目git clone git@gitee.com:huruqing/nongye-server-template.git

  2. 进入项目

  3. npm i 安装依赖

  4. npm run dev 运行项目

  5. 数据库

    1. 全局安装 json-server npm i json-server@0.17.0 -g
    2. 进入/nongye-server-template/db, 执行 npm i
    3. 启动数据库 进入/nongye-server-template, 执行 npm run json

02 生产环境#

  1. 接口地址:

    http://106.55.50.108:3007

  2. 配置数据库地址

    • /src/utils/request.js
    • 端口号从7001~7040
    import axios from "axios";
import { Message, Loading } from "element-ui";
import store from "../store";
// 判断环境
let isDev = process.env.NODE_ENV === "development";
let baseURL;
if (!isDev) {
  baseURL = "http://localhost:3007";
} else {
  baseURL = "http://106.55.50.108:3007";
}

const service = axios.create({
  baseURL,
  timeout: 30000, // 请求超时时间(因为需要调试后台,所以设置得比较大)
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    let port = 端口号; // 7001~7040
    config.data = {
      ...config.data,
      port,
    };
    config.params = {
      ...config.params,
      port,
    };
	.......      
  }

(二) 路由守卫和用户权限管理(重点难点)#

(0) 准备工作和注意事项#

  1. 修改路由配置

  2. 添加登录路由和组件

  3. 登录成功保存用户信息

  4. 在layout组件显示用户名和添加退出登录

    注意: 把vuex持久化先注释

(1) 路由守卫#

vue-router的路由守卫和axios拦截器有着类似的作用

  1. from 当前路由
  2. to 要前往的目标路由
  3. next 执行下一步操作
  • next() 进入到目标路由(相当于放行)
  • next({ path: '/login' }) 跳转到/login路由
import Vue from "vue";
import Router from "vue-router";
import Layout from "@/views/layout/layout";
import store from '@/store/index';
Vue.use(Router);

const initRoutes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login/login.vue"),
  },
  {
    path: "/about",
    name: "about",
    component: () => import("../views/about/about.vue"),
  },
];

export const routes = [
  {
    path: "/home",
    name: "home",
    meta: {
      title: "首页",
      icon: "location-o",
    },
    component: Layout,
    redirect: "/home/index",
    children: [
      {
        path: "index", // /home/index
        name: "home-inex",
        component: () => import("../views/home/home.vue"),
      },
      {
        path: "list", // /home/list
        name: "home-list",
        component: () => import("../views/home/list.vue"),
      },
    ],
  },
  {
    path: "/type",
    name: "type",
    meta: {
      title: "分类",
      icon: "like-o",
    },
    component: Layout,
    redirect: "/type/index",
    children: [
      {
        path: "index", // /type/index
        name: "type-inex",
        component: () => import("../views/type/type.vue"),
      },
    ],
  },
  {
    path: "/cart",
    name: "cart",
    meta: {
      title: "购物车",
      icon: "star-o",
    },
    component: Layout,
    redirect: "/cart/index",
    children: [
      {
        path: "index", // /cart/index
        name: "cart-inex",
        component: () => import("../views/cart/cart.vue"),
      },
    ],
  },
];

const router = new Router({
  routes: [
    ...initRoutes,
    ...routes,
  ]
});

/**
 * to 要去的路由
 * from 当前路由
 * next 执行下一步操作 next(), next('/login')
 */

/**
 * 判断逻辑:
 * 1. 判断是否应登录
 * 2. 判断要去哪个路由
 * 3. 设置一个白名单, 白名单上面的路由直接放行, 比如login
 */

let whiteList = ['login','about'];
router.beforeEach((to,from,next)=>{ 
  let token = store.state.token;
  // token存在表示已经登录
  if (token) {
    // 已登录, 所去路由为login时,直接跳首页
    if(to.name === 'login') {
      next('/home')
    } else {
      next();
    } 
  } else {
    /**
     * 没有登录时的逻辑
     * 白名单内的路由,直接放行
     * 其它路由跳转到登录页面
     */
    if (whiteList.includes(to.name)) {
      next();
    } else {
      next('/login');
    }  
  } 
}); 
export default router;

(2) 用户权限控制#

用户权限控制的思路是:

  1. 前端一开始的路由只配置了一些基本的路由(无需登录的路由)
  2. 用户登录之后, 后台会给前端返回一个角色字段(比如type), 表明用户的身份
  3. 前端就根据用户的身份(角色字段)配置不同的路由(有的公司由后台返回)
  4. 前端使用router.addRoutes方法动态添加权限路由。
  5. 在后台管理系统的侧边栏一般根据路由数组动态渲染，这样不同角色能看到的列表就不一样。

实践: 在各个代码的关键节点打上断点, 查看整个流程 ​

(3) 动态渲染侧边栏#

  1. 让侧边栏组件(layout)作为所有需要侧边栏的父路由组件(父路由有什么内容, 子路由就有什么内容)
  2. 刚开始创建路由的时候, 只创建无需登录就能访问的路由
  3. 根据设置权限设置多个路由数组(routes)
  4. 登录成功的时候添加加权限动态添加相应的路由数组, 并把路由数组存入vuex的store(仓库)
  5. 渲染侧边栏的时候, 把路由数组(routes)从store取出, 使用v-for进行动态渲染

(三) 导出表格#

  1. 安装插件 vue-json-excel
  2. 到时并使用(main.js)
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
  1. demo
<template>
  <div>
    <download-excel
      :data="json_data"
      :fields="json_fields"
      type="xlsx"
      worksheet="My Worksheet"
      name="我的表格.xlsx"
    >
      <el-button type="primary" size="mini">导出数据 </el-button>
    </download-excel>

    <el-table :data="json_data">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="备注" prop="desc"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表头
      json_fields: {
        编号: "id",
        姓名: "username",
        年龄: "age",
        备注: "desc",
      },
      // 表格内容
      json_data: [
        {
          id: "234",
          username: "aaa",
          age: "11",
          desc: "xxxx",
        },
        {
          id: "112",
          username: "bbb",
          age: "12",
          desc: "xxxx",
        },
      ],
    };
  },
};
</script>

(四) 几个小知识#

(1) 复制文本#

  1. 安装插件 vue-clipboard2
  2. 导入并使用插件
// main.js
import VueClipboard from 'vue-clipboard2' 
Vue.use(VueClipboard);
  1. demo
<template>
  <div>
    <p>
      <span>{{ msg }}</span
      ><button v-clipboard:copy="msg" v-clipboard:success="onCopy">复制</button>
    </p>

    <p>
      <span>{{ msg2 }}</span
      ><button v-clipboard:copy="msg2" v-clipboard:success="onCopy">复制</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "哈哈哈哈哈哈哈哈哈哈",
      msg2: "嘿嘿嘿嘿嘿嘿",
    };
  }, 
  methods: {
    onCopy() {
      alert("复制成功");
    },
  },
};
</script>

<style>
</style>

(2) 国际化#

  1. 安装插件 vue-i18n
  2. 导入和配置插件
  3. this.$i18n.locale 可以修改语言
// 配置语言包, /src/lang目录下新建en.js和zh.js
// en.js
export const lang = {
    account: 'account',
    password: 'password',
}
// zh.js
export const lang = {
    account: '账号',
    password: '密码',
}
 

// main.js
import VueI18n from "vue-i18n/dist/vue-i18n.esm.js";
Vue.use(VueI18n); // 通过插件的形式挂载
const i18n = new VueI18n({
  locale: store.state.lang, // 语言标识
  // this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    "zh": require("./lang/zh"), // 中文语言包
    "en": require("./lang/en"), // 英文语言包
  },
});

// 使用
<template>
  <div>
    <p>{{ $t("lang.account") }}: zhangsan</p>
    <p>{{ $t("lang.password") }}: 123456</p>

    <button @click="handClick">切换语言</button>
  </div>
</template>

<script>
export default {
  methods: {
    handClick() {
      if (this.$i18n.locale === "en") {
        this.$i18n.locale = "zh";
      } else {
        this.$i18n.locale = "en";
      }
    },
  },
};
</script>

(3) 隐藏模块#

 {
        path: "developkit",
        hidden: true, // 隐藏
        meta: { title: "开发套件" },
        name: "device-developkit",
        component: () => import("@/views/device/developKit.vue"),
},

(4) 路由模块高亮#

详情请看饿了么UI库的 el-menu

 <el-menu
     :uniqueOpened="true" // 只打卡一个模块
     :default-active="activeRoute"  // 路由高亮
     class="el-menu-sidebar-menu"
     background-color="#0d2439"
     text-color="#fff"
     active-text-color="#69B3FF"
     :collapse="isCollapse"
     :router="true"
>

(5) 表格序号#

<el-table-column align="center" type="index" label="序号" width="100"></el-table-column>

(6) 监听路由变化#

watch: {
    $route(newRoute) {
        console.log(newRoute);	
    }
}

项目实践代码#

(一) 测量模块#

(1) 新建组件 measure

(2) 配置路由

  {
    path: '/measure',
    name: 'measure',
    component: Layout,
    meta: {
      title: '测量',
      icon: "icon-fyxx" 
    },
    redirect: '/measure/measure',
    children:[
      {
        path:'measure',
        name: 'measure-measure',
        component: () => import("@/views/measure/measure.vue"),
      }
    ]
  }

(3) 渲染列表

  1. 表格 stripe添加斑马纹, border添加边框
  2. 单元格 align="center" 内容居中
  3. 添加操作按钮

(4) 获取数据, 渲染列表

  1. 统一管理请求 api/index.js里封装请求方法

    export const $measurementList = (params={})=> {
    return $axios.get('/measurement/list',{params});
}

  2. 使用方法

    // 导入方法
import {$measurementList} from '@/api/index';

// 使用
getList() {
    $measurementList().then(res=> {
        this.list = res.data;
    })
}
牛马小先锋
关注
  • 0
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue项目实战(移动端)
m0_65769258的博客
04-16 6494
相关资料# vue-cli脚手架:vue2脚手架 vue3脚手架:vite vue官网: [介绍 — Vue.js vscode插件 vetur 必备工具 vue-helper 一些辅助功能 Vue VSCode Snippets 片段 (一) 创建项目# 01 安装vue-cli脚手架# npm install -g @vue/cli 02 查看vue脚手架版本# 出现版本号表示成功 vue --version 03 创建一个新项目# 创建项目 vue ..
Vue2 案例
weixin_51008360的博客
07-16 835
文本</div>
PC端完整版商城模板在线商城静态页面
06-11
PC端完整版商城模板在线商城静态页面。包括首页、详情页、列表页、个人中心页等五十多个页面
vue项目实现电脑桌面端
最新发布
geng97280的博客
05-25 249
vue项目实现电脑桌面端
vue+element简单实现电商商城网站，模仿小米电商商城
热门推荐
lucky_fang的博客
11-25 3万+
vue+element简单实现商城网站首页，模仿小米电商商城
vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
ejunda的博客
06-30 7713
vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
手把手教你实现VuePC端，移动端适配
Orange71234的博客
06-21 8321
可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。如果出现报错，请降低版本后重装依赖（在package.json文件中将版本修改为如下，然后终端运行命令npm install即可）（1）rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；1、在vue.config.js配置如下。
Vue 移动端、PC 端适配
weixin_42754922的博客
12-03 1万+
Vue 移动端、PC 端适配可以使用lib-flexible、amfe-flexible​​​​​​​、postcss-pxtorem​​​​​​​、postcss-px2rem、postcss-px-to-viewport这几个插件。
Vue 3 开发PC端实战从零到上线.docx
05-16
本文将带你从零开始，使用 Vue 3 开发一个简单的PC端应用程序，并将其部署上线。 第一步：环境搭建 安装Node.js：确保你的开发环境中安装了Node.js。可以从Node.js官网下载并安装。 安装Vue CLI：Vue CLI 是官方...
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
一个基于vue的pc端综合性网上购物商城
08-12
总的来说，“基于Vue的PC端综合性网上购物商城”是一个综合性的实战项目，涉及到前端开发、后端服务以及数据库管理等多个方面，对于学习和掌握Vue.js及相关的Web开发技术具有很高的参考价值。开发者可以通过研究此...
vue期末大作业网上商城PC端项目.zip
10-21
在这个"vue期末大作业网上商城PC端项目"中，我们可以深入学习Vue.js如何用于构建复杂的PC端应用程序，特别是电子商务平台。 首先，项目的核心是`bookstore-main`目录，它包含了整个网上商城的源代码。我们可以通过...
Vue全家桶技术+商城项目实战+源码解析
07-01
第四章Vue全家桶技术：Vue-router的基本使用、命名路由、动态路由、404路由、路由组件传参、嵌套路由、命名视图、路由守卫、vuex的无大将state、getters、mutations、actions、vue-cli3开发购物车项目实战 ...
商城项目 pc----商品详情页
每天都要努力学习哦~~
06-23 1087
详情页
黑马程序员前端 Vue3 小兔鲜电商项目——（一）初始化项目
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-21 7141
黑马程序员前端 Vue3 小兔鲜电商项目——（一）初始化项目
Vue2积分商城PC端项目(六)
qq_44930306的博客
11-20 1028
这章到此就完成了vue2.0PC端的所有功能，主要是利用节流完成了滚动加载更多功能以及跨域的配置。
VUE实现购物商城网站前端源码
xcLeigh
12-18 8912
VUE实现购物商城网站源码，商城网站源码，实现了商城登录注册页面、商城主页面、商品列表页面、商品详细页面、购物车页面，可以在这个模板下借用相关代码，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
vue、vuex、vue-router结合的电商网站
yanggreater的博客
09-05 4815
最近在简单的学习了vue之后，通过实践去理解vue的用法和它的优点。 首先先简单介绍一下文件的目录 components是公共的组件,里面包含cart.vue(购物车)、product.vue(list.vue文件要用到的产品公用组件)、productDetail.vue(产品详情页面) views文件是视图文件(就是list.vue主页文件)，libs下的utils是一些公共函数，rout...
vue购物车案例（源码）
m0_64970691的博客
10-11 5136
基于vue的购物车案例
前端vue项目实战案例
09-06
一个前端Vue项目实战案例可以按照以下开发流程进行： 1. 项目立项：包括需求分析、技术选型和确定项目人员等。 2. 产品原型设计：设计产品原型图，并进行UI设计。 3. 项目开发：前端与后端进行开发，前端部分包括设计图和切图，后端部分包括服务端的开发。 4. 项目测试：由测试部门进行测试。 5. 项目上线：由运维和后端负责项目的上线。 开发环境方面，可以使用开发工具如VS Code，并安装Vue开发工具vetur。项目运行环境可以是Node v10，Vue脚手架可以使用vue-cli 4.5.7。代码版本工具可以使用Git/Gitee。 一个具体的前端Vue项目实战案例可以是根据《Vue项目开发实战》开发的项目。Vue.js是一套构建用户界面的渐进式框架，相对于其他重量级框架，Vue采用自底向上增量开发的设计，它的核心库只关注视图层，并且非常容易学习和整合到其他库或已有项目中。 该实战案例可以包含以下内容： - 创建登录页面，使用snipaste截图软件进行页面设计。 - 安装element-ui和axios请求库，用于页面的样式和数据请求。 - 配置myaxiosapi文件接口，用于与后端进行数据交互。 - 实现常见的跨域方式，确保前端项目能够正常与后端进行通信。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue综合实战项目](https://blog.csdn.net/m0_45272038/article/details/113828939)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue项目开发实战](https://download.csdn.net/download/weixin_38596117/19953278)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛马小先锋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值