免费客户管理系统：免费使用的高效客户管理系统推荐。

随着企业竞争的日益激烈，企业的客户管理越来越受到重视，客户管理系统的需求也逐渐增加。然而，目前市场上大多数的客户管理系统都需要支付昂贵的费用，对于小型企业来说，这是难以承受的负担。

因此，我们推荐一款免费客户管理系统-YetiCRM，它不仅免费，而且易于使用、高效便捷。

YetiCRM是一款基于WEB的管理系统，无需安装任何软件，只需进入官网，注册账号即可。此外，YetiCRM还提供了丰富的客户数据管理功能，例如客户信息管理、销售机会管理、订单管理、合同管理等，大大提高了企业的管理效率。

除此之外，YetiCRM还提供了强大的报表功能，用户可以轻松地生成各种类型的报告，例如销售额统计报告、工作日志等，让企业更好地掌握经营状况、做出决策。

另外，由于YetiCRM具备可定制性和可扩展性，所以企业可以根据自己的需求进行个性化设置，例如添加自定义的流程、自定义字段等，更好地满足企业的实际需求。

最后，YetiCRM采用了全球领先的安全技术，实现了严格的安全控制，保证了用户的数据安全。

总之，YetiCRM是一款免费、高效、易用、可扩展的客户管理系统，适合中小型企业使用。如果你正在寻找一款高效便捷的客户管理系统，那么YetiCRM是你不错的选择，欢迎体验！

系列文章目录 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三） 项目资源下载 GitHub下载地址Gitee下载地址项目MySql数据库文件

文章目录

前言

今天的主要内容包括：基础环境的搭建、前端头部页面的编写、前端主体页面的编写等，今天的内容学起来会比较轻松，加油！下面就开始今天的学习！

一、基础环境的搭建 首先在views下新建front文件夹

然后在front中新建Home.vue，在其中输入如下的简单内容即可

然后在index.js中给它配个路由

然后来到前端访问，发现可以成功访问到刚才新建的页面。到目前为止我们这里已经脱离了之前的后台框架，也和之前做的前端不在一个框架内，可以认为是两套系统，所以我们接下来要做新的内容了

然后在front内新建Front.vue，并输入以下简单内容

Front.vue作为主路由，然后刚才写的Home.vue作为其子路由，这个就和之前写的Manage.vue和Home.vue一样。所以我们需要在index.js中给其配一个路由

然后来到前端发现可以正常访问

二、前端头部页面的编写 学生角色不应该允许进入后台，而是进入前台系统，只有老师和管理员可以进入后台系统。为了完成这个功能，我们首先在Login.vue中加入如下内容，用来判断不同的角色进入不同的系统

然后我们可以测试一下，发现以“沙僧”学生角色进入的就是前台页面，以“admin”管理员角色进入的就是后台页面

先在这里解决一个小Bug，在Aside.vue中加入如下内容，解决收缩菜单文字不消失的问题

然后此时来到前端发现，侧边栏收缩的时候，文字也消失了

然后随便找一个图片作为我们这个子项目的一个图标，放在assets中

然后将Front.vue中的全部内容替换为如下内容，读者注意图标的地址要换成自己的地址

<template>
    <div>
        
        <div style="display: flex; height: 60px; line-height: 60px; border-bottom: 1px solid #eee">
            <div style="width: 300px; display: flex; padding-left: 30px">
                <div style="width: 60px">
                    <img src="../../assets/logoSub.png" alt=""
                         style="width: 50px; position: relative; top: 5px; right: 0">
                div>
                <div style="flex: 1">欢迎来到xx系统div>
            div>
            <div style="flex: 1">
                <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal" router>
                    <el-menu-item index="/front/home">首页el-menu-item>
                    <el-menu-item>视频播放el-menu-item>
                    <el-menu-item>文章列表el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台template>
                        <el-menu-item>选项1el-menu-item>
                        <el-menu-item index="2-2">选项2el-menu-item>
                        <el-menu-item index="2-3">选项3el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">选项4template>
                            <el-menu-item index="2-4-1">选项1el-menu-item>
                            <el-menu-item index="2-4-2">选项2el-menu-item>
                            <el-menu-item index="2-4-3">选项3el-menu-item>
                        el-submenu>
                    el-submenu>
                el-menu>
            div>
            <div style="width: 200px">
                <div v-if="!user.username" style="text-align: right; padding-right: 30px">
                    <el-button @click="$router.push('/login')">登录el-button>
                    <el-button @click="$router.push('/register')">注册el-button>
                div>
                <div v-else>
                    <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
                        <div style="display: inline-block">
                            <img :src="user.avatar" alt=""
                                 style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
                            <span>{{ user.nickname }}span><i class="el-icon-arrow-down" style="margin-left: 5px">i>
                        div>
                        <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <router-link to="/password" style="text-decoration: none">修改密码router-link>
                            el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <router-link to="/person" style="text-decoration: none">个人信息router-link>
                            el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span style="text-decoration: none" @click="logout">退出span>
                            el-dropdown-item>
                        el-dropdown-menu>
                    el-dropdown>
                div>
            div>
        div>
        <div style="width: 1000px; margin: 0 auto">
            <router-view/>
        div>
    div>
template>
<script>
    export default {
        name: "Front",
        data() {
            return {
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            }
        },
        created() {
        },
        methods: {
            logout() {
                this.$store.commit("logout")
                this.$message.success("退出成功")
            }
        }
    }
script>
<style>
    .item {
        display: inline-block;
        width: 100px;
        text-align: center;
        cursor: pointer
    }
    .item a {
        color: #1E90FF;
    }
    .item:hover {
        background-color: LightPink;
    }
style>

此时的子项目主页如下图所示

三、前端主体页面的编写 为了让不登陆的用户也可以访问前台内容，所以我们要对不敏感的数据不设置登陆验证。首先在config中新建一个自定义注解AuthAccess.java，并输入如下内容

然后修改一下拦截器的拦截规则

然后在EchartsController.java中新增如下函数，查询所有的文件

然后将Home.vue中的全部内容替换为如下内容

<template>
    <div>
        <div style="margin: 10px 0">
            <el-carousel height="450px" :interval="10000">
                <el-carousel-item v-for="item in imgs" :key="item">
                    <img :src="item" alt="" style="width: 100%">
                el-carousel-item>
            el-carousel>
        div>
        <div style="margin: 10px 0">
            <el-row :gutter="10">
                <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px">
                    <div style="border: 1px solid #ccc; padding-bottom: 10px">
                        <img :src="item.url" alt="" style="width: 100%">
                        <div style="color: #666; padding: 10px">{{ item.name }}div>
                        <div style="padding: 10px">
                            <el-button type="primary">购买el-button>
                        div>
                    div>
                el-col>
            el-row>
        div>
    div>
template>
<script>
    export default {
        name: "FrontHome",
        data() {
            return {
                imgs: [
                    'https://img30.360buyimg.com/babel/s1580x830_jfs/t1/109361/24/22897/74054/621ede58E099d37e3/f12730c81df6046a.jpg!cc_1580x830.webp',
                    'https://img13.360buyimg.com/babel/s1580x830_jfs/t1/96398/30/23715/70228/6221e9d0Ec1b9fe65/f66e2ad76314d6cd.jpg!cc_1580x830.webp'
                ],
                files: []
            }
        },
        created() {
            this.request.get("/echarts/file/front/all").then(res => {
                console.log(res.data)
                this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
            })
        },
        methods: {}
    }
script>
<style>
style>

然后我们来到前端测试，发现所有功能均完好，即实现了轮播图，又实现了下方的文件展示

总结

以上就是今天学习的全部内容，明天将会给大家带来关于SpringBoot集成Redis实现缓存的相关内容。明天见！