【2阶】vue+axios实现CRM系统客户添加丶客户列表-crm-5

已于 2022-11-16 17:14:37 修改
阅读量311 收藏 2
点赞数
分类专栏： BootStrap Vue 文章标签： vue.js 前端 javascript
于 2022-11-15 20:04:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wangzz1217/article/details/127872501
版权

目录

一.客户添加

1.1客户实体类

1.2前端

1.3后端

二.客户列表

2.1前端

2.2后端

三.修改

基本和用户功能相同

一.客户添加

1.1客户实体类

1.2前端

1.2.1添加用户页面

 1.2.2代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加客户</title>
    <!--导入bootstrap依赖 -->
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--导入Vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
    <style>

        a:link{
            font-size: 20px;
            color: rgb(109, 109, 109);
        }

        a:visited{
            font-size: 20px;
            color: rgb(109, 109, 109);
        }

        a:hover{
            font-size: 20px;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <!-- bootstrap行-->
    <div class="row">
        <!-- 显示导航-->
        <div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px;">
            <!-- bootstrap行 -->
            <div class="row">
                <div class="col-md-12" style="background-color: rgb(0,40,77); text-align: center; height: 70px; line-height: 70px; font-size: 20px; color: white; font-weight: bold">
                    <img src="assets/img/logo.png" style="width: 30px; height: 30px; margin-right: 8px"/>
                    蜗牛CRM管理系统
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
                    <a href="index.html">进入首页</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
                    <a href="user_add.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
                    <a href="custom_list.html">客户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
                    <a href="custom_add.html">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
                    <a href="#">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px 20px 0px">
                    <a href="login.html">退出登录</a>
                </div>
            </div>
        </div>
        <!-- 显示内容 -->
        <div class="col-md-9" style="border: 1px solid gray; height: 800px">
            <div class="row">
                <!-- 显示提示位置 -->
                <div class="col-md-12" style="height: 70px; color: rgb(109,109,109); font-size: 18px; line-height: 70px; font-weight: bold; padding-left: 20px">
                    >&nbsp;&nbsp;添加客户
                </div>
            </div>
            <!-- 显示内容 -->
            <div class="row" style="background-color: rgb(240,242,245); height: 730px; padding: 20px">
                <div class="col-md-12" style="background-color: white; height: 730px; border: none; border-radius: 5px;">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
                            <label>客户名</label>
                            <input type="text" class="form-control" v-model="customName"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>年龄</label>
                            <input type="text" class="form-control" v-model="age"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>手机号</label>
                            <input type="text" class="form-control" v-model="phone"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>微信</label>
                            <input type="text" class="form-control" v-model="wechat"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>邮箱</label>
                            <input type="text" class="form-control" v-model="email"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>住址</label>
                            <input type="text" class="form-control" v-model="addr"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>爱好</label>
                            <input type="text" class="form-control" v-model="hoby"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>职业</label>
                            <input type="text" class="form-control" v-model="occupation"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label style="margin-right: 15px">性别</label>
                            <label class="radio-inline">
                                <input type="radio" value="0" v-model="sex" name="sex"/>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="1" v-model="sex" name="sex"/>女
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px; text-align: center">
                            <button class="btn btn-primary" style="margin-right: 8px" @click="doAdd">添加</button>
                            <button class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //创建vue实例
    new Vue({
        el: '#app',
        data: {
            customName: null,
            age: null,
            sex: null,
            phone: null,
            wechat: null,
            addr: null,
            hoby: null,
            email: null,
            occupation: null

        },
        methods: {
            doAdd(){
                var url = "custom_add?name="+this.customName+"&age="+this.age+"&sex="+this.sex+"&phone="+this.phone+"&wechat="+this.wechat+"&addr="+this.addr+"&hoby="+this.hoby+"&email="+this.email+"&occupation="+this.occupation;

                //通过axios发送请求到servlet
                axios.get(url).then(response => {
                    if(response.data == '保存成功'){
                        window.location.href = 'custom_list.html';
                    } else {
                        alert("添加用户失败！！！");
                    }
                });
            }
        }
    });
</script>
</body>
</html>

1.3后端

1.3.1添加用户方法

public int insertCustom(Custom custom) {
        String sql = "insert into t_custom (name,age,sex,phone,wechat,addr,hoby,email,occupation,uid) values ('"+custom.getName()+"',"+custom.getAge()+","+custom.getSex()+",'"+custom.getPhone()+"','"+custom.getWechat()+"','"+custom.getAddr()+"','"+custom.getHoby()+"','"+custom.getEmail()+"', '"+custom.getOccupation()+"',"+custom.getUid()+")";

        return this.executeUpdate(sql);
    }

1.3.2添加用户Servlet

package controller;

import com.alibaba.fastjson.JSON;
import dao.CustomDAO;
import dao.impl.CustomDAOImpl;
import entity.Custom;
import entity.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.PreparedStatement;
import java.util.List;

/**
 * 查询全部客户
 */
@WebServlet("/custom_list")
public class CustomListServlet  extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //译码码集,解决中文乱码问题
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf8");

        //获取打印输出流,向网页输出内容
        PrintWriter writer = resp.getWriter();



        //从session中获取用户信息,是不是admin用户
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("user");


        //通过dao查询客户列表
        CustomDAO dao = new CustomDAOImpl();
        List<Custom> list = null;

        if ("admin".equals(user.getUserName())){
            //显示全部的客户信息
            list = dao.selectAllCustom();

        }else{
            //显示当前登录的用户自己的客户信息

            list = dao.selectCustomByUid(user.getId());
        }

        //向页面输出客户信息
        String json = JSON.toJSONString(list);//将list对象转为json
        writer.print(json);


        //释放资源
        writer.close();
    }
}

二.客户列表

2.1前端

2.1.1显示用户页面

2.1.2代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <!--导入bootstrap依赖 -->
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--导入Vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
    <style>
        a:link{
            font-size: 20px;
            color: rgb(109, 109, 109);
        }
        a:visited{
            font-size: 20px;
            color: rgb(109, 109, 109);
        }
        a:hover{
            font-size: 20px;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <!--行-->
    <div class="row">
        <!--登录导航-->
        <div class="col-md-3" style="background-color:rgb(0,21,41);height: 800px">
            <!--行-->
            <div class="row">
                <div class="col-md-12" style="background-color:rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color:white;font-weight: bold;">
                    <img src="assets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px;">
                    蜗牛CRM管理系统
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="index.html">进入首页</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="user_add.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="custom_list.html">客户管理</a>
                </div>
            </div>
            <div class="custom_add.html">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="custom_add.html">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="update_passwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登陆</a>
                </div>
            </div>
        </div>
        <!--登录内容-->
        <div class="col-md-9" style="border: 1px solid gray;height: 800px">
            <!--显示提示位置-->
            <div class="row">
                <div class="col-md-12"style="height: 70px;color:rgb(109,109,109);font-size: 18px; line-height: 70px;font-weight: bold;padding-left: 20px;">
                    >&nbsp;&nbsp;客户管理
                </div>
            </div>
            <!--显示内容-->
            <div class="row" style="background-color:rgb(240,242,245);height: 730px;padding: 20px 20px 20px 20px;">
                <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px;">
                    <!--使用bootstrap表格样式-->
                    <table class="table table-striped" style="margin-top: 20px;">
                        <!--表格描述-->
                        <caption>客户管理-客户列表</caption>
                        <!--表头-->
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>手机号</th>
                            <th>微信号</th>
                            <th>住址</th>
                            <th>爱好</th>
                            <th>邮箱</th>
                            <th>职业</th>
                            <th>创建者</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <!--表格内容-->
                        <tbody>
                        <tr v-for="c in customs">
                            <td>{{c.id}}</td>
                            <td>{{c.name}}</td>
                            <td>{{c.age}}</td>
                            <td>{{c.sex==0?'男':'女'}}</td>
                            <td>{{c.phone}}</td>
                            <td>{{c.wechat}}</td>
                            <td>{{c.addr}}</td>
                            <td>{{c.hoby}}</td>
                            <td>{{c.email}}</td>
                            <td>{{c.occupation}}</td>
                            <td>{{c.nickName}}</td>
                            <td>
                                <button class="btn btn-link"@click="doUpdate(c.id)">修改</button>
                                <button class="btn btn-link" @click="doDelete(c.id)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            customs:null
        },
        created:function () {//页面加载完成之后执行
            this.requstCustomList();//请求用户列表的函数

        },
        methods: {
            //删除用户,根据id
            doDelete(id) {
                //console.log("要删除的用户id:"+id)//打印控制台
                //请求servlet删除用户
                axios.get("delete_custom?id="+id).then(res => {
                    if (res.data == '删除成功'){
                        this.requstCustomList();//请求用户列表的函数

                    }else{
                        alert("删除失败!!!")
                    }
                });
            },
            doUpdate(id){//点击修改按钮触发
                //跳转到user_update.html页面,并且传递id过去
                window.location.href = "custom_update.html?id="+id;
            },
            requstCustomList(){
                //发送请求获取客户列表
                axios.get("custom_list").then(response => {
                    this.customs = response.data;
                });
            }
        }
    });
</script>
</body>
</html>

2.2后端

1.2.1显示客户列表方法

public List<Custom> selectAllCustom() {
        String sql = "SELECT c.*, u.nick_name FROM t_custom AS c LEFT JOIN t_user AS u ON c.uid=u.id";
        ResultSet rs = this.executeQuery(sql);
        List<Custom> list = new ArrayList<Custom>(); //用于保存所有客户信息

        try {
            while(rs.next()){
                Custom custom = new Custom();
                custom.setId(rs.getInt("id"));
                custom.setName(rs.getString("name"));
                custom.setAge(rs.getInt("age"));
                custom.setSex(rs.getInt("sex"));
                custom.setPhone(rs.getString("phone"));
                custom.setWechat(rs.getString("wechat"));
                custom.setAddr(rs.getString("addr"));
                custom.setHoby(rs.getString("hoby"));
                custom.setEmail(rs.getString("email"));
                custom.setOccupation(rs.getString("occupation"));
                custom.setUid(rs.getInt("uid"));
                custom.setNickName(rs.getString("nick_name"));
                list.add(custom);
            }
            this.closeAll();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

        return list;

    }

1.2.2显示客户列表Servlet

package controller;

import com.alibaba.fastjson.JSON;
import dao.CustomDAO;
import dao.impl.CustomDAOImpl;
import entity.Custom;
import entity.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.PreparedStatement;
import java.util.List;

/**
 * 查询全部客户
 */
@WebServlet("/custom_list")
public class CustomListServlet  extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //译码码集,解决中文乱码问题
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf8");

        //获取打印输出流,向网页输出内容
        PrintWriter writer = resp.getWriter();



        //从session中获取用户信息,是不是admin用户
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("user");


        //通过dao查询客户列表
        CustomDAO dao = new CustomDAOImpl();
        List<Custom> list = null;

        if ("admin".equals(user.getUserName())){
            //显示全部的客户信息
            list = dao.selectAllCustom();

        }else{
            //显示当前登录的用户自己的客户信息

            list = dao.selectCustomByUid(user.getId());
        }

        //向页面输出客户信息
        String json = JSON.toJSONString(list);//将list对象转为json
        writer.print(json);


        //释放资源
        writer.close();
    }
}

三.修改

3.1修改
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改用户</title>
    <!--导入bootstrap依赖 -->
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--导入Vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
    <style>

        a:link{
            font-size: 20px;
            color: rgb(109, 109, 109);
        }

        a:visited{
            font-size: 20px;
            color: rgb(109, 109, 109);
        }

        a:hover{
            font-size: 20px;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <!--行-->
    <div class="row">
        <!--登录导航-->
        <div class="col-md-3" style="background-color:rgb(0,21,41);height: 800px">
            <!--行-->
            <div class="row">
                <div class="col-md-12" style="background-color:rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color:white;font-weight: bold;">
                    <img src="assets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px;">
                    蜗牛CRM管理系统
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="index.html">进入首页</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="user_add.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="custom_list.html">客户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="custom_add.html">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="update_passwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登陆</a>
                </div>
            </div>
        </div>
        <!--登录内容-->
        <div class="col-md-9" style="border: 1px solid gray;height: 800px">
            <!--显示提示位置-->
            <div class="row">
                <div class="col-md-12"style="height: 70px;color:rgb(109,109,109);font-size: 18px; line-height: 70px;font-weight: bold;padding-left: 20px;">
                    >&nbsp;&nbsp;修改用户
                </div>
            </div>
            <!--显示内容-->
            <div class="row" style="background-color:rgb(240,242,245);height: 730px;padding: 20px 20px 20px 20px;">
                <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px;">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 50px;">
                            <label>用户名</label>
                            <input type="text" class="form-control" v-model="userName" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 20px;">
                            <label>昵称</label>
                            <input type="text" class="form-control" v-model="nickName"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 20px;">
                            <label>手机号</label>
                            <input type="text" class="form-control"v-model="phone"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 20px;">
                            <label>生日</label>
                            <input type="text"  class="form-control" v-model="birth"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 20px;">
                            <label style="margin-right:15px ">性别</label>
                            <label class="radio-inline">
                                <input type="radio" value="0" v-model="sex" name="sex"/>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="1" v-model="sex" name="sex"/>女
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 20px;text-align: center">
                            <button class="btn btn-primary" style="margin-right: 8px" @click="doUpdate">修改</button>
                            <button class="btn btn-default" @click="doRest">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //创建vue实例
    new Vue({
        el: '#app',
        data: {
            id:null,
            userName: null,
            nickName: null,
            sex: null,
            phone: null,
            birth: null
        },
        methods: {
            doUpdate(){
                var url = "user_update?id="+this.id+"&user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex
                    +"&phone="+this.phone+"&birth="+this.birth;
                //通过axios发送请求到servlet
                axios.get(url).then(response=>{
                    if (response.data == '修改成功'){
                        window.location.href = 'user_list.html';
                    }else{
                        alert("修改失败");
                    }
                });
            },
            doRest(){
                this.userName = null;
                this.nickName = null;
                this.sex= null;
                this.phone = null;
                this.birth = null;
            }
        },
        created: function () { //页面加载完成后触发
            var url = window.location.href; //获取网页的url地址
            // console.log(url);
            var id = url.substring(url.indexOf("=")+1);
            this.id=id;
            // console.log(temp);
            //通过axios发送请求获取用户信息
            axios.get("user_info?id="+id).then(response => {
                console.log(response.data);
                this.userName = response.data.userName;
                this.nickName = response.data.nickName;
                this.sex = response.data.sex;
                this.phone = response.data.phone;
                this.birth = response.data.birth;
            });
        }

    });
</script>

</body>
</html>

略,基本和用户列表相同.....

小王码字
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-crm:非常简单但又全面的的一个vue2后台管理系统，满足开发一个后台系统的基本需求
03-11
演示： : 说明 非常简单的一个vue2后台管理系统： 1，vuex状态管理 2，axios前预设接口交互，本地mock数据 3，使用element-UI前端UI框架 4，路由器单页运用 5，webpack建造整个项目 开始 这是的项目模板 # install dependencies npm install # 开发环境 at localhost:8081 npm run dev # build for production with minification 生产环境 npm run build 资料夹结构 构建-webpack配置文件webpack配置 config-webpack配置文件 dist-构建构建文件 src-您的应用 api 资产 常见的 组件-您的vue组件 嘲笑 样式 视图-您的页面 威克斯 App.vue main.js-主文件 routes.js 静
CRM管理系统(Vue页面组件)
magic_818的博客
11-08 540
制作CRM系统(登录页面控件)
vue crm_CRM系统的Vue组件
cuk5239的博客
07-26 622
vue crm Vue框架crm (vue-frame-crm) vue component for crm system. crm系统的vue组件。 安装 (Install) npm install vue-frame-crm --save || npm install[emailprotected] --save 翻译自: https://vuejsexamples.com/vue-...
基于vue.js的客户关系管理系统(crm)的设计与实现
07-03 185
此客户关系管理系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。客户关系管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。本客户关系管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。
crm客户关系管理系统（vue-admin-master+maven多模块+SSM）.rar
01-16
crm客户关系管理系统使用maven多模块设计，前端使用vue-admin-master，后台使用SSM框架，使用saas模式，采用shiro管理权限（登录验证实现，权限管理未实现），在我的博客里有shiro的权限管理demo。
vue2-crm：vue2旅客引导平台（vue2 + vue-router + axios + element-ui + sass）
02-05
vue2-crm 一个Vue.js项目（2.0） vue2 + vue路由器+ vueX + lodash + sass + element-ui + axios + es6 只是练习和娱乐 如果有帮助，您可以单击右上角的“星号”以支持它。 谢谢！ ^ _ ^ 或者您可以“关注”，我...
基于jfinal+vue+ElementUI的前后端分离CRM系统.zip
03-23
基于jfinal+vue+ElementUI的前后端分离CRM系统 主要技术栈 核心框架：jfinal3.8 缓存：redis caffeine 数据库连接池：Druid 工具类：hutool,fastjson,poi-ooxml 定时任务：jfinal-cron 项目构建工具：maven ...
Admin-System:vue、vue-router、axios、json-server 实现CRM数据系统
05-11
Admin System 客户信息系统小CRM 实现语言：vue,vue-router,axios,json-server Build Setup # ========================= vue 环境启动步骤 ========================= # install dependencies 安装 npm install # ...
java开发oa系统源码下载-vue-crm:卡方通用CRM系统前端代码
06-05
java开发oa系统源码下载 <<<<<<< HEAD 72crm-java F3 Java 悟空CRM（9.0版本） 悟空软件长期为企业提供企业管理软件(CRM/HRM/OA/ERP等)的研发、实施、营销、咨询、培训、服务于一体的信息化...
基于tp5.0的客户管理CRM系统.zip
05-17
数据交互通过axios以及RESTful架构来实现 用户校验通过登录返回的auth_key放在header 值得注意的一点是：跨域的情况下，会有预请求OPTION的情况 Server搭建 服务端使用的框架为thinkphp5.0.2，搭建前请确保拥有lamp...
CRM客户管理系统（vue+springboot）
12-24
基于vue+spring boot前后端分离的客户管理系统，拥有登录，注册，简单的增删改查等功能。
Vue-CRM
03-29
vue-crm 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
使用Vue控制CRM管理系统页面组件
m0_74795259的博客
11-09 174
重置
使用Springboot和Vue开发的CRM系统，真正的前后端分离,可独立部署、跨域访问,支持多国语言...
lgcjava的专栏
07-18 3367
框架特点 最新技术（Springboot、MyBatis、Swagger-UI、Vue2.X、bootstrap） 真正前后端分离：真正的前后端分离,可独立部署、跨域访问,适合大型互联网项目的动态扩展 (前端纯html，使用Vue框架，后端springboot+mybatis) 移动端访问：使用Swagger-UI可清晰的查看接口定义、接口测试 支持多国语言：包括前台和后台实...
基于Java Vue开发的客户关系管理系统
W18974295844的博客
02-25 208
可用于二次开发，毕业设计，项目实战等等
Vue cli4构建一个简单的CRM项目(一)
dreamingbaobei的博客
03-12 691
在windows系统搭建VUE环境(安装vue-cli4)中我们使用默认配置创建一个项目hello-world，这次我们首先用图形化界面来创建一个项目。 在命令行中输入下面的命令打开一个浏览器窗口 vue ui 安装这个页面的引导我们来创建一个项目hello-word2,在预设中选择手动配置项目，在功能中做如下选择 在配置中做如下选择 点击创建项目然后等待即可。 ...
crm客户关系管理系统（vue+maven多模块+SSM）
带风的小子的博客
01-16 2515
一、技术介绍 1.1 maven多模块 这里写了maven多模块的介绍和为什么要使用maven多模块，后面还有maven多模块项目搭建实战。 https://blog.csdn.net/qq_36892672/article/details/103836614 1.2 前后端分离 vue基础：https://blog.csdn.net/qq_36892672/article/details/10...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 668
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue+axios+el-upload实现文件上传并跨域
05-21
要实现Vue + Axios + El-upload进行文件上传并跨域，需要按照以下步骤进行操作： 1. 在Vue项目中安装axios和element-ui。在命令行中输入以下命令即可安装： ``` npm install axios element-ui --save ``` 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值