京淘电商后台管理系统

最新推荐文章于 2022-03-22 09:50:26 发布

原创

最新推荐文章于 2022-03-22 09:50:26 发布 · 917 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文详细记录了使用Vue.js开发京淘电商后台管理系统的全过程，包括创建Vue项目、用户登录模块、路由配置、数据交互、权限管理、商品分类及商品管理等功能的实现，涉及到的技术包括axios、ElementUI、MybatisPlus等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue创建jt模板

2、点击启动app

3、用HBuilderX打开vue目录下的jt，更改App.vue里面的内容

4、删除默认路由

5、删除默认Hello组件

6、用户登录模块准备，创建文件

7、编辑路由文件

8、指定路由占位符

9、显示有2处报错，关闭校验

10、路由测试

11、设定默认路径跳转，当用户访问根目录时，重定向到登陆组件

12、检查node js版本：node -v

检查npm版本号：npm -v

在其他路径下执行上面两个指令，也没有问题

切换淘宝npm库：npm config set registry https://registry.npm.taobao.org

检查镜像配置是否生效：npm config list

13、安装插件

14、配置插件，选择Import on demand

15、安装axios运行依赖

16、安装开发依赖less-loader，版本不宜太高，项目根目录：npm install [email protected]

17、安装开发依赖 less

18、安装运行时依赖 vue-quill-editor，富文本编辑器

19、安装之后的效果

20、安装运行时依赖 echarts

21、删掉src

22、复制到之前的jt目录下

23、重启

24、定义表单校验规则 Login.vue

25、定义校验规则JS

26、效果展现

27、当点击重置按钮时，应该清空数据

28、登录数据校验

29、导入axios组件，在main.js中添加

30、发送Ajax请求

31、创建jt项目，New Project Maven

32、Next，填写页面，Finish

33、项目最初形式

34、maven配置

35、设置作者和时间

36、创建UserController

37、加依赖，之后点击右侧的Maven，刷新

    <!--引入父级工程-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.0</version>
        <relativePath/>
    </parent>


    <properties>
        <java.version>1.8</java.version>
        <!--跳过测试类加载-->
        <skipTests>true</skipTests>
    </properties>

    <dependencies>
        <!--SpringMVCjar包文件-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 引入aop支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>

        <!--热部署工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!--lombok插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!--测试包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--引入jdbc包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!--引入数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--spring整合mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

    </dependencies>

    <!--maven通过插件对maven版本的springboot进行管理
       体现: 项目打包/发布/测试等相关操作.
   -->
    <build>
        <plugins>
            <!--springboot专门为springboot的工程开发了一款项目管理插件-->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

38、编辑UserController

    /**
     * 需求:根据用户名和密码查询数据，实现登陆，要求返回token
     * URL:/user/login
     * 请求参数:post JSON{username:"xxx",password:"xxxx"}
     * 返回值:SysResult对象（token）
     */
    @PostMapping("/login")
    public SysResult login(@RequestBody User user){
        //执行后端登陆操作，要求返回token密钥
        String token = userService.login(user);
        //判断token返回值是否有效
        if(StringUtils.hasLength(token)){
            //如果访问正确，则返回有效的token信息
            return SysResult.success(token);
        }else{
            //登陆失败
            return SysResult.fail();
        }
    }

39、idea中使用eclipse快捷键

40、编辑User

@TableName("user")
@Data
@Accessors(chain = true)
public class User extends BasePojo {

    @TableId(type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String phone;
    private String email;
    private Boolean status;

}

41、编辑BasePojo

@Data
@Accessors(chain = true)
public class BsaePojo implements Serializable {

    @TableField(fill = FieldFill.INSERT)//表示入库时需要赋值
    private Date created;
    @TableField(fill = FieldFill.INSERT_UPDATE)//表示入库/更新时赋值
    private Date updated;

}

42、编辑SysResult

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {

    private Integer status; //定义状态码 200成功 201失败
    private String msg;     //服务器提示信息
    private Object data;    //服务器返回的数据

    //重载: 方法名相同,参数列表不同
    public static SysResult fail(){
        return new SysResult(201, "服务器处理失败", null);
    }

    public static SysResult success(){
        return new SysResult(200, "服务器处理成功", null);
    }

    public static SysResult success(Object data){
        return new SysResult(200, "服务器处理成功", data);
    }
    
    public static SysResult success(String msg, Object data){
        return new SysResult(200, msg, data);
    }

}

43、编辑UserService

public interface UserService {

    List<User> findAll();

    String login(User user);

}

44、编辑UserServiceImpl

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }

    /**
     * 实现用户登录操作
     * 1、将明文转化为密文 MD5加密
     * 2、通过username和password查询数据库
     * 3、有数据：用户名和密码正确 返回UUID token
     *   没有数据：用户名和密码错误 返回null
     * @param user
     * @return
     */
    @Override
    public String login(User user) {
        String password = user.getPassword();
        //md5hash相对于md5更加“安全”，没有绝对安全的系统
        String md5Pass = DigestUtils.md5DigestAsHex(password.getBytes());
        user.setPassword(md5Pass);
        //根据其中不为null的数据当做where条件 username/password
        //Sql: select * from user where username=#{username} and password=#{password}
        QueryWrapper<User> queryWrapper = new QueryWrapper<>(user);
        User userDB = userMapper.selectOne(queryWrapper);
        if(userDB == null){
            //没有查询到数据
            return null;
        }
        String token = UUID.randomUUID().toString().replace("-", "");
        return token;
    }
    
}

45、编辑UserMapper

public interface UserMapper extends BaseMapper<User> {
}

46、创建启动项

@SpringBootApplication
@MapperScan("com.jt.mapper")
public class SpringBootRun {

    public static void main(String[] args) {

        SpringApplication.run(SpringBootRun.class, args);
    }

}

47、编辑application.yml

server:
  port: 8091
  servlet:
    context-path: /
spring:
  datasource:
    #如果使用高版本的数据库则添加cj
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

#mybatis-plush配置
mybatis-plus:
  type-aliases-package: com.jt.pojo
  mapper-locations: classpath:/mappers/*.xml
  configuration:
    map-underscore-to-camel-case: true

logging:
  level:
    com.jt.mapper: debug

48、编辑UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.mapper.UserMapper">
    
</mapper>

49、编辑页面JS

当用户登录成功之后，将token保存到客户端中的sessionStorage中，因为用户的其他操作都必须保证用户已经登录之后才能操作，所以通过sessionStorage保存用户的token记录，表示已经登录。

50、浏览器效果展示

51、跳转Home页面，编辑路由

52、输入正确的用户名和密码，登录之后显示效果

53、路由导航守卫

业务说明：当用户没有登录时，不可以访问其他页面。如果sessionStorage中没有token数据，则表示没有登录，用该拦截，跳转到登录页面

54、用户退出操作

业务说明：当用户点击退出按钮时，应该删除sessionStorage中的token信息，并且访问登录页面

55、ElementUI页面布局介绍

56、实现左侧菜单获取

57、权限列表查询的Sql

    <!--需求：查询当前父级下的所有子级
        条件: 父级.id = 子级.parent_id
        只查询父子级-->
    SELECT p.id, p.name, p.parent_id, p.path, p.level, p.created, p.updated,
    c.id c_id, c

最低0.47元/天解锁文章