ssm框架vue前端项目怎么跑

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ssm框架vue前端项目怎么跑相关的知识，希望对你有一定的参考价值。

参考技术A 这样跑，制定好框架啊，写好包要有容器制定好框架，写好包，要有容器就可以跑起来 参考技术B 首先创建一个空文件夹,用于存放整个项目,然后在地址栏全选输入cmd按回车,就会进入到当前文件夹目录下的终端 在命令行中输入vue create ssm-ui 创建一个新的vue项目,ssm-ui是项目文件夹的名字 这样表示当前vue项目正在下载,当加载完成后,输入以下俩条命令,就可以运行我的vue项目 项目加载完成后出现一个地址,可以根据这个地址,在网页上访问我们的vue项目 前端环境搭建 打开我们的idea,进入到初始页面,打开文件,选择我们刚刚创建项目的总包,把我们的项目放在idea上面,这样方便我们操作。
进入idea打开我们的项目后,在idea下面的选择栏,选择我们的终端,输入npm install vue-router@4,配置我们的vue-router 安装完毕后,在我们vue项目的包下,打开src

Vue

我的工作台 - Gitee.com

回顾SSM

思维导图1

前端核心分析

Vue概述

Vue：前端体系，前后端分离

Vue.js是一套构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

视图层：HTML+CSS+JS 给用户看，刷新后台数据

网络通信：axios

页面跳转：Vue-router

状态管理：Vuex

VueUI：飞冰

ES6规范通过webpack打包成ES5支持

前端为主的MV*模式

  • MVC(同步通信为主)：Model,View,Controller
  • MVP(异步通信为主): Model,View,Presenter
  • MVVM(异步通信为主): Model,View,ViewModel

NodeJS带来全栈时代

第一个Vue程序

MVVM

前后端数据通过ViewModel绑定，虚拟化Dom概念

MVVM模式实现者

  • Model：模型层，在这里表示JavaScript对象
  • View：视图层，在这里表示DOM(HTMl)操作对象
  • ViewModel：连接视图层和数据的中间组件，Vue.js就是MVVM中ViewModel层的实现者

在MVVM架构中是不允许数据和视图直接通信的只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

  • ViewModel能够观察数据的变化并对视图内容进行更新
  • ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue.js的核心就是实现DOM监听和数据绑定

Vscode

Hubilder

Sublime

WebStrom

IDEA:插件 Vue

MVVM

为什么要使用MVVM？

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模式(Model)

有几大好处：

  • 低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定不同的View上，当View变化时候Model不变，当Model变化时View也可以不变。
  • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。
  • 可测试：界面素来是比较难于测试的，而现在测试可以只针对ViewModel来写。
QQ截图20210506100115

第一个Vue程序

<body>
<!--  view层  模板-->
    <div id="app">
        {{message}}
    </div>
<!--  导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
<!--   vm:对象  el:元素  data:数据  -->
        let vm=new Vue({
            el:"#app",
            //Model：data
            data:{
                message:"hello,Vue!"
            }
        });
    //ViewModel:通过vm.message动态双向绑定更新值
    </script>
</body>

Vue基本语法

Vue常用7个属性：el,data,template,methods,render,computed,watch

导入Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

V-bind

我们已经成功创建第一个Vue应用！看起来这跟渲染一个字符串模板非常相似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立关联，所有东西都是响应式对的。我们在控制台操作对象属性，界面可以时实更新。

我们还可以使用v-bind来绑定元素特性！

        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>

v-bind等被称为指令。指令带有前缀v-，以表示他们是Vue提供的特殊属性。他们会在渲染DOM上引用特殊的响应式行为。此处的意思是：将这个节点的Title属性和Vue实例的message属性保持一致。

判断-循环

v-if ,v-else

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            ok: true
        }
    });
</script>

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            type:'A'
        }
    });
</script>

循环

<div id="app">
    <ul>
        <li v-for="item in items">
            {{item.message}}
        </li>
    </ul>
</div>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
        //数组用[]表示，对象用{}
            items:[
                {message:'mafu学Java'},
                {message:'mafu学Vue'}
            ]
        }
    });
</script>

事件 v-on

可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。

<div id="app">
    <button v-on:click="sayHello">点击</button>
</div>
<script>
<!--    Vue有七大属性  有事件就有方法：method-->
    let vm=new Vue({
        el: "#app",
        data: {
            message:"mafu!"
        },
        methods: {//方法必须定义在Vue的Method属性中 v-on:事件 监听
            sayHello: function (){//this指向vm这个对象
                alert(this.message);
            }
        }
    });
</script>

Vue双向绑定

什么是双向绑定？

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化时候，视图也发生变化，当视图发生变化时数据也同步变化，这也是Vue.js的精髓之处。

值得注意的是我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们输赢VueX，那么数据流也是单向的，这时就会和双向数据绑定冲突。

为什么要实现数据双向绑定？

在Vue.js中，如果使用VueX实际上数据还是单向的，之所以说数据是双向绑定，这是用的UI控件来说的，对于我们处理表单，Vue.js双向数据绑定用起来就非常舒服了。即两者并不排斥，在全局性数据流中使用单向，方便跟踪；局部性数据流使用双向，简单操作。

v-model

text框：

<div id="app">
    输入的文本：<input type="text" v-model="message"> {{message}}
</div>
<script>
    <!--    Vue有七大属性  有事件就有方法：method-->
    let vm=new Vue({
        el: "#app",
        data: {
            message: "123"
        }
    });
</script>

radio单选框：

<div id="app">
<!--    输入的文本：<input type="text" v-model="message"> {{message}}-->
       <label>性别：</label>
       <input type="radio" name="sex" value="man" v-model="checked"> 男
       <input type="radio" name="sex" value="women" v-model="checked"> 女
       <p>
           选中了谁：{{checked}}
       </p>

</div>
<script>
    <!--    Vue有七大属性  有事件就有方法：method-->
    let vm=new Vue({
        el: "#app",
        data: {
            checked:false
        }
    });
</script>

select下拉框:

<div id="app">
     下拉框：
      <select v-model="selected">
          <option value="" disabled>--请选择--</option>
          <option>凤山</option>
          <option>英桥</option>
          <option>文地</option>
      </select>
      <p>
          选中：{{selected}}
      </p>
</div>
<script>
    <!--    Vue有七大属性  有事件就有方法：method-->
    let vm=new Vue({
        el: "#app",
        data: {
            selected:''
        }
    });
</script>

Vue组件讲解

什么是组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th：fragment等框架有异曲同工之妙。通常一个应用会以一颗嵌套的组件树的形式来组织。

QQ截图20210506113426

第一个Vue组件

注意：在实际开发中并不会使用一下方式开发组件，而是采用vue-cli创建.vue模板文件的开发方式，以下方法只是为让大家理解什么是组件。

使用Vue.component()方法注册组件，格式：

    //定义一个Vue组件component
    Vue.component("mf",{
        template:'<li>hello</li>'
    });

组件绑定然后props接收参数

<div id="app">
<!--    组件：传递给组件中的值：需要先绑定然后用props接收参数-->
       <mf v-for="item in items" v-bind:item="item"></mf>
</div>
<script>
    //定义一个Vue组件component
    Vue.component("mf",{
        props: ['item'],
        template:'<li>{{item}}</li>'
    });
    let vm=new Vue({
        el: "#app",
        data: {
            items: ["java","linux","c++"]
        }
    });
</script>

Axios异步通信

网络通信：

  • jQuery.ajax()
  • Axios

什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，其功能特点如下：

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持PromiseAPI [JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)

为什么实用Axios

由于Vue.js是一个视图层框架，并且作者严格遵守Soc(关注度分离原则)，所以Vue.js并不包含AJAX通信的功能，为了解决通信功能，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本后停止了对该插件的维护并推荐Axios框架。少用jQuery因为它操作Dom太频繁！

第一个Axios程序

导入Axios CDN

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Vue声明周期

Vue实例有一个完整的生命周期，就也是从开始创建，初始化数据，编译模板，挂载DOM，渲染，更新，渲染，卸载等一系列过程，我们称之为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程就是生命周期。

在整个Vue生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

<!DOCTYPE html>
<!--suppress JSValidateTypes -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  v-clock解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

        <div id="vue" v-clock>
            <div>{{info.name}}</div>
            <div>{{info.address.city}}</div>

            <a v-bind:href="info.url">kuangShengXue</a>
        </div>



        <!--导入JS文件-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            let vm=new Vue({
                el: '#vue',
                //data:属性 vm
                data(){
                    return{
                        //请求的返回参数格式必须和JSON字符串格式一样
                        info:{
                            name:null,
                            address:{
                                street:null,
                                city:null,
                                country:null
                            },
                            url:null
                        }
                    }
                },
                mounted(){//钩子函数 链式编程   es6新特性
                    axios.get('../data.json').then(response=>(this.info=response.data));
                }
            });
        </script>

</body>
</html>

计算属性

计算属性、内容分发、自定义事件

什么是计算属性

计算属性是Vue的特色：计算出来的结果保存在属性中。运行在内存：虚拟DOM

计算属性的重点突出在属性两个字上，首先它是个属性其次这个属性有计算的能力，这里的计算就是这个函数；简单点说，他就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已：可以想象为缓存！

  <div id="app">
         <p>currentTime1:{{currentTime1()}}</p>
         <p>currentTime2:{{currentTime2}}</p>
    </div>

    <!--导入JS文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el: '#app',
            data: {
                message:'hello,mf'
            },
            methods: {
                currentTime1:function (){
                    return Date.now();//返回一个时间戳
                }
            },
            computed: {//Vue特色：计算属性  methods和computed中的方法名不能重名，重名之后只会调用methods方法
                currentTime2:function (){
                    this.message;//只有this当中的属性变化时才会重新计算
                    return Date.now();//返回一个时间戳
                }
            }
        });
    </script>
QQ截图20210506205334

结论

调用方法时，每次都需要进行计算，既然有计算过程则必须产生系统开销，那如果这个结果不是经常变化呢？此时就可以考虑将这个结果缓存起来以节约系统开销。

插槽slot

内容分发

在Vue.js中我们使用元素作为承载分发内容的出口，作者成为插槽，可以应用在组合组件的场景中。

<!--简写 v-bind: 简写为：  v-on:简写为@-->
    <div id="app">
        <todo></todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </div>

<!--导入JS文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //后面加个反斜杠，表示换行
        //slot:插槽，插数据
        Vue.component('todo',{
            template: '<div>\\
                          <slot name="todo-title"></slot>\\
                          <ul>\\
                             <slot name="todo-items"></slot>\\
                          </ul>\\
                        </div>'
        });
        Vue.component('todo-title',{
            props:['title'],
           template: '<div>{{title}}</div>'
        });
        Vue.component('todo-items',{
            props前后端分离vue+ssm项目整合


 ssm框架前端与后端如何联系


 Ssm框架下怎么把数据库数据动态显示到前端页面？


 Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）五（前端页面，使用域名访问本地项目）


 代码中怎么看出使用了vue框架


 不依赖框架用vue3空白项目从头打造一个过得去的前端