详细的SSM+Vue小项目（适合新手）

浅浅的花香味﹌ 2023-03-01 13:36 85阅读 0赞

**一、准备工作**  
     **1.工具准备**  
      (1)后端：idea intellij+Mysql  
      (2)前端：webstorm  
      (3)需求文档：易文档  
     **2.知识准备**  
     (1)后端：spring mvc(maven工程的创建+基础的配置 [作者往期可参考的相应博文][Link 1] )+mybatis(配置＋对应的数据库语句使用)+mysql的简单创建表的操作  
     (2)前端：主要是JS需要熟悉，然后html,css需要具有一定的了解和基本的使用，然后使用[element-ui][]的优质组件库进行搭建比较优质的界面(图表可以参考echarts、vcharts、hcharts，自行百度了)；然后掌握了解Vue的框架使用，重点掌握router的使用，另外vuex、mock也可以进行简单的了解，最后再是axios的交互工作（理解接口的作用，通过url进行前后端的信息交互）

**二、具体步骤**

**1.需求分析**  
第一步对于系统的成型和最终价值至关重要，需求挖掘好是成功的一本，所以说大家务必注意，而此次的demo需求比较简单；实现一个简单的登录和实时输入并显示坐标点，另外作者还进行了一些简单的前端后台管理系统框架搭建，大家觉得不错可以进行参考（作者也是GitHub上历经千辛万苦找到感觉还不错的项目进行改造的）。由于此次需求较简单，作者就在此列出简易的需求框架，等下次作者的完整项目做出来之后再进行详细的列出。

下面展示一下登录的接口用例（为了节约篇幅，就省去了另外一个功能的接口测试，另外也可以使用postman进行接口测试，当然这个接口测试是在后端搭建好了之后，作者提前放出来了）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]  
需求框架  
关于需求：功能板块方面更多是去描述具有的具体功能而不是我这样描述怎么实现，切忌！！忽略作者写的乱七八糟的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]  
     **2.后端搭建**（默认配置等已经完成）  
     **（1）创建MySQL表**（关于创建maven工程就省去了哈，默认这个还是会的，不会可以转我上面的参考我往期博文）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 2]  
点击右侧的“+”找到MySQL进行连接（先需要打开本地的MYSQL,输入用户名和密码进行test connection），连接之后，进行创建User表和XyRecord表。  
关于表的创建，作者使用的GUI进行，所以说不能放出来SQL代码来方便大家，其实GUI两个简单的表也很快的。  
     （**2）进行控制类的分析**

**分析过程参考上面的文档描述**！！！！

核心代码：

@ResponseBody
      @RequestMapping(value = "login",method = RequestMethod.POST)
      @CrossOrigin
      public boolean Check( String id,
                         String password) throws IOException {
    
        System.out.println(id+password);
    
        String password3=null;
       password3=Connection.checklogin(id);
    
        if(password.equals(password3)){
          System.out.println(password3);
          return true;
        }
    
    
    @RequestMapping(value = "/xyCommit",method = RequestMethod.POST)
      @CrossOrigin
      @ResponseBody
      public Xy action(String Date,String X,String Y) throws IOException {
      Xy xy=new Xy(Date,X,Y);
      //插入更新
      Connection connection=new Connection();
      connection.XyTest(xy);
    
      //传回
      xy.setDate(connection.test4().getDate());
      xy.setX(connection.test4().getX());
      xy.setY(connection.test4().getY());
    
      return xy;
    }

**（3）前端设计**  
设计是一门艺术活，如果自己觉得设计审美不太好，可以参考elemetn-ui上面的一些优质组件，我就不详说了，提几点注意点，也是我遇到的一些问题

**1.main.js进行全局引用  
2.router最好采用自带搭建好的，自己添加易出错  
3.在axios中的使用this.$router进行跳转时使用箭头函数  
4.显示不出界面时，学会看检查源代码报错信息**\*\*  
**5.有时进行CSS样式设计时可能会出现选择器设置无效，你可以采取style进行设计**  
**6.有时router index.js使用component()=>import（）进行路由会出现问题，你可以采用先import的形式**  
**7.图表展现有两种形式，（1）调用函数（initDOM节点）（2）直接调用options,注意调用的先后，采用第一种，往往是在方法中写入drealine(),然后在mounted里面进行调用，这样一来在渲染之前已经调用此函数，再进行数据更新，图可能不会自动更新，需要再次调用**

最后放一下效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 5]

**写在最后，很快作者将会完成此项目，到时将会放在GitHub上面，若有朋友需要欢迎关注或联系我；**

[Link 1]: https://blog.csdn.net/qq_44654974/article/details/107217763
[element-ui]: https://element.eleme.cn/#/zh-CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]: /images/20230208/78d7dbccb5b4492eaa8156aa3a43cbda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200726215221719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200726215712712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200726222057748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020072622211972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020072622214356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0,size_16,color_FFFFFF,t_70