...mapState({ nickname: state => state.user.nickname, welcome: state => state.user.welcome }),

时间: 2023-04-05 08:01:46 浏览: 153

vue2电商管理后台项目.pdf

推荐用来练习vue2或者入坑vue的新人学习参考，文档从json-server数据库设计到vue搭建项目，json-server模拟后端请求数据，从项目创建到环境配置到调用请求接口，商品crud分类实现，基本的添加商品，删除商品，添加商品功能，重置功能等等一系列。强烈推荐学vue的小伙伴用来练习vue2！！！ ps：json-server教程文档在点我的其他资源查看~资源有任何问题可以私信我 ### Vue2 电商管理后台项目知识点解析 #### 1. 项目概述 - **项目目的**：本项目旨在提供一个全面的学习平台，帮助初学者掌握 Vue2 的核心概念和技术实践，特别适合那些希望通过实际项目加深对 Vue2 理解的新手。 - **技术栈**：主要使用 Vue2 框架进行前端开发，并通过 json-server 作为模拟后端服务，提供数据支持。 - **应用场景**：适用于电商网站或应用程序的后台管理系统。 #### 2. 数据库设计与结构 - **表结构设计**： - **s_classify (分类表)** - `classify_id`: int 类型，分类 ID，为主键并自动递增。 - `classify_name`: varchar(50)，分类名称。 - `description`: varchar(255)，分类描述。 - `create_time`: datetime，创建时间。 - `update_time`: datetime，修改时间。 - `is_delete`: tinyint，是否删除标记，0 表示未删除，1 表示已删除。 - **s_goods (产品表)** - `goods_id`: int 类型，产品 ID，为主键并自动递增。 - `goods_name`: varchar(255)，产品名称。 - `specification`: varchar(50)，产品规格。 - `description`: varchar(500)，产品描述。 - `particulars`: varchar(500)，产品详情。 - `price`: decimal(10,2)，价格。 - `classify_id`: int，商品分类 ID。 - `remark`: varchar(500)，备注。 - `create_time`: datetime，创建时间。 - `update_time`: datetime，修改时间。 - `is_delete`: tinyint，是否删除标记，0 表示未删除，1 表示已删除。 - **s_users (用户表)** - `users_id`: int 类型，用户 ID，为主键并自动递增。 - `username`: varchar(50)，用户名。 - `password`: varchar(50)，密码。 - `nickname`: varchar(20)，真实姓名。 - `email`: varchar(50)，邮箱。 - `sex`: tinyint，性别标记，0 表示男性，1 表示女性。 - `description`: varchar(500)，个人简介。 - `remark`: varchar(500)，备注。 - `create_time`: datetime，创建时间。 - `update_time`: datetime，修改时间。 - `is_delete`: tinyint，是否删除标记，0 表示未删除，1 表示已删除。 - **s_address (用户地址表)** - `address_id`: int 类型，地址 ID，为主键并自动递增。 - `address_name`: varchar(255)，地址名称。 - `users_phone`: varchar(15)，收货电话。 - `users_name`: varchar(20)，收货人姓名。 - `postcode`: varchar(15)，邮编。 - `users_id`: int，用户 ID。 - `create_time`: datetime，创建时间。 - `update_time`: datetime，修改时间。 - `is_delete`: tinyint，是否删除标记，0 表示未删除，1 表示已删除。 - **s_orders (订单表)** - `orders_id`: int 类型，订单 ID，为主键并自动递增。 - `orders_number`: varchar(20)，订单号。 - `goods_name`: varchar(50)，商品名称。 - `goods_number`: int，下单数量。 - `orders_price`: decimal(10,2)，订单价格。 - `specification`: varchar(50)，产品规格。 - `description`: varchar(500)，产品描述。 - `particulars`: varchar(500)，产品详情。 - `price`: decimal(10,2)，价格。 - `classify_id`: int，商品分类 ID。 - `status`: int，订单状态，0 表示下单成功，1 表示已付款，2 表示已发货，3 表示用户已收货，4 表示争议协商。 - `remark`: varchar(500)，备注。 - `create_time`: datetime，创建时间。 - `update_time`: datetime，修改时间。 - `is_delete`: tinyint，是否删除标记，0 表示未删除，1 表示已删除。 #### 3. Vue2 项目搭建步骤 - **第一步**：解压 `vue-admin-template-permission-control.zip` 文件，将解压后的文件复制到你存放代码的目录，并重命名（例如命名为 `vue-shop`）。 - **第二步**：使用开发工具（如 IDEA 或 VScode）打开项目。 - **第三步**：安装项目依赖。 - 运行命令 `npm install` 来安装项目所需的依赖包。 - **第四步**：启动项目。 - 使用命令 `npm run dev` 启动本地开发服务器。 #### 4. 修改前端框架配置 - **国际化配置**：在 `src/main.js` 文件中修改国际化设置，将 `en` 修改为 `zh-CN`。 - **Node.js 语法校验**： - 修改 `vue.config.js` 文件中的相关设置。 - 安装 Prettier 插件以统一代码格式。 - 创建 `.prettierrc` 文件并配置相关选项，例如设置 `lintOnSave: false`，以放宽代码校验规则。 - **页面标题**：在 `src/settings.js` 文件第 3 行处修改页面标题。 - **用户下拉菜单**：根据需要调整 `main.js` 中的菜单配置。以上是关于 “Vue2 电商管理后台项目” 的主要内容及关键技术点。通过这些详细的步骤和指导，可以帮助初学者更好地理解 Vue2 的实际应用，并能够快速上手开发自己的电商后台管理系统。

这是一个关于 Vue.js 中的 mapState 函数的问题，我可以回答。mapState 函数是用于将 Vuex store 中的 state 映射到组件的计算属性中，方便组件访问和使用。在这个例子中，映射了 user 模块中的 nickname 和 welcome 两个 state 到组件的计算属性中。

阅读全文

...mapState({ nickname: state => state.user.nickname, welcome: state => state.user.welcome }),

相关推荐

vue.js中导出Excel表格的案例分析

Node.js API详解之 querystring用法实例分析

let obj = { url: '/users/register', query: { username: this.username.value, password: this.password.value, rpassword: this.rpassword.value, nickname: this.nickname.value, } } 解释一下这段代码

@Insert("insert into users (NAME,password,nickname) " + "values (#{user.name},<if test='password == null'>default</if>" + "<if test='password != null'>#{password}</if>,#{user.nickname})") void create(@Param("user") User user);有错误吗？

解释代码： {{item.nickname}}

16-17 数据挖掘算法基础 - 分类与回归1(1).ipynb

最新推荐

接口文档模板.docx

16-17 数据挖掘算法基础 - 分类与回归1(1).ipynb

精选微信小程序源码：停车场管理小程序（含源码+源码导入视频教程&文档教程，亲测可用）

最新闪客网盘系统源码支持限速+按时收费+文件分享+可对接易支付

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"