将后端的controller返回的数据绑定到前端

最新推荐文章于 2024-07-15 07:45:00 发布

玖不久

最新推荐文章于 2024-07-15 07:45:00 发布

阅读量1k

点赞数

分类专栏：笔记文章标签：前端 vue.js javascript springboot

本文链接：https://blog.csdn.net/userohzy/article/details/127238363

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.概念

前端只需要独立编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可。
前端通过Ajax请求来访问后端的数据接口，将Model展示到View中即可。
前后端开发者只需要提前约定好接口文档(URL. 参数、数据类型…，然后分别独立开发即可，前端可以造假数
据进行测试，完全不需要依赖于后端
前端应用:负责数据展示和用户交互。
后端应用:负责提供数据处理接口。
前端HTML — Ajax – RESTful 后端数据接口。

在这里插入图片描述
2.安装

vue其实就是一个js脚本，vue的运行要依赖于node的npm管理工具来实现，所以首先需要安装node，然后使用npm命令创建vue工程。
步骤一：安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org，安装成功后就可以用cnpm 代替npm下载资源文件，达到提高安装插件速度的效果

步骤二：安装vue脚手架构建工具 npm install -g @vue/cli 【安装脚手架后才可以使用vue -之类的命令】说明：如果你使用这命令说某某Exist，则说明的脚手架安装过了，这是你就可以先使用 vue -V查看版本，要求3.0以上才可以

步骤三：vue ui 在线可视化创建vue项目【步骤三执行的过程中cmd不能关闭】创建完成后，在任务中有一个server运行就可以在输出中看到访问地址，这样一个vue项目就启动成功了，此时你在cmd中ctrl+c中端，这样服务器就中断了，此时你再次访问那个连接地址就不会被访问到

3.使用创建的vue项目

在idea中open刚刚创建的项目，其次在idea中安装vue插件，在idea的终端命令中输入命令npm run serve，小贴士：你必须要在含有package.json的目录下运行此命令。如果不是要cd到此同级目录下，然后执行npm

4.创建的项目目录分析

APP.vue主页面，就相当于main函数的样子。

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/> <!--这是数据的变化窗口，我们点击路由连接Home和About,窗口进行变化，而不是将这个页面替换，即template是不变的-->
</template>

views文件夹里面的vue文件就是动态加入到主页面的内容，属于窗口，即点击Home就是到views文件夹中找到此Home.vue加载到视图中

它是怎么做到的呢？

这是就要一个桥梁，即router 里面的index.js，它会将主页与窗口进行连接

在主页中的，输入localhost:8080/#/就可以访问这个页面；
关于同理输入localhost:8080/#/about就可以访问到这个页面
加入井号是因为hash路由的原因，不然访问是没有反应的

就这么神奇吗？它是这么处理的呢？

依靠router文件夹中的index.js来进行目标绑定，就会发生这么神奇的事件

import { createRouter, createWebHashHistory } from 'vue-router'<!--这个是默认的导入必须要有-->
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

如上vue提供了两种方式进行处理
方式一：使用import 导入需要内容，格式：import 名称 from 需要的页面
方式二：直接使用component的表达式

我们注意到里面有一个name属性，这个可以使用js的方式进行页面调转

<template>
  <nav>
    <router-link to="/">主页</router-link> |
    <router-link to="/about">关于</router-link>
    <button @click="_toBrand">跳转</button>
  </nav>
  <router-view/>
</template>

<script>
    export default {
      name:"App",
      methods:{
        _toBrand(){
          this.$router.push({name:'Brand'})  <!--此name就是router里面的name属性值-->
        }
      }
    }
</script>

router的js中

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Brand from "@/views/Brand";
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/brand',
    name: 'Brand',
    component: Brand

  }]

view中的Brand.vue

<template>
  <div>
    <table>
      <tr>
        <td>id</td>
        <td>brand_name</td>
        <td>company_name</td>
      </tr>
    </table>
    {{ msg }}   //插值语法直接拿到值
  </div>

</template>

<script>
export default {
  name: "Brand",
  data() {    //data函数的返回值就是展示的数据
    return {
      msg: "hello"
    }
  }
}
</script>

<style scoped>

</style>

当我们将它的数据域改变

<script>
export default {
  name: "Brand",
  data() {
    return {
      brands:[
        {id: 1,
          brand_name :'小米1',
          company_name :'阿云1'
        },{id: 2,
          brand_name :'小米2',
          company_name :'阿云2'
        },{id: 3,
          brand_name :'小米3',
          company_name :'阿云3'
        }
      ]
    }
  }
}
</script>

在template中使用v-for遍历数据

<template>
  <div>
    <table>
      <tr>
        <td>id</td>
        <td>brand_name</td>
        <td>company_name</td>
      </tr>
<!--      <tr>-->
<!--        <td>{{brands[0].id}}</td>-->
<!--        <td>{{brands[0].brand_name}}</td>-->
<!--        <td>{{brands[0].company_name}}</td>-->
<!--      </tr>-->
      <tr v-for="item in brands">
        <td>{{item.id}}</td>
        <td>{{item.brand_name}}</td>
        <td>{{item.company_name}}</td>
      </tr>
    </table>

  </div>

</template>

接下来，我们在后端从数据库中将数据拿出来

@RestController
@RequestMapping("/brand")
public class BrandController {
    @Autowired
    private BrandService brandService;
    @RequestMapping("/getAll")
    public List<Brand> getAll(){
        return brandService.list();
    }
}

访问浏览器就会得到
[{“id”:1,“brandName”:“三只松鼠”,“companyName”:“三只松鼠股份有限公司”},{“id”:2,“brandName”:“华为”,“companyName”:“华为技术有限公司”},{“id”:3,“brandName”:“小米”,“companyName”:“小米科技有限公司”}]
这个列表，里面是json的数据格式

接下来，修改前端的代码，在data函数的里面将自己测试添加的数据改为我们后面拿到的数据

方法：前端使用axios请求，所以使用vue add axios将axios增加上去，可能你在idea中运行说无法使用这个命令，则需要在Windows shell中进行set-ExecutionPolicy RemoteSigned操作，然后在idea中就可以安装这个插件了。安装好后，就会出现plugins目录，里面含有axios.js

当页面一加载就会出现这个数据，所有需要创建初始化函数，vue中提供了钩子函数created(){}，一个vue实例被生成后会调用这个函数。然后就可以在这里使用axios发送get请求

 created() {  
    console.log(this.created()) //这个this指的就是vue对象
    axios({method:'get',url:'http://localhost:8081/brand/getAll'}).then(function (resp) {
      console.log(resp.data)
      this.a =resp.data //在回调函数中的this，指的就是回调，所以这个this就是未定义对象了，即它根本拿不到a属性
      console.log(this) 
      //所以如果我们直接在这里面使用this.brands=resp.data是做不到绑定的，因为这个this是undefined
      //以下是解决方案
    })

说明：created方法是一个生命周期钩子函数,一个vue实例被生成后会调用这个函数
axios执行之后会产生一个promise，then就是一个方法结束之后执行的事情，then传的是回调函数，这个回调函数的参数就是promise对象的数据

created() {  
   const  _this = this
    axios({method:'get',url:'http://localhost:8081/brand/getAll'}).then(function (resp) {
     _this.brands = resp.data
    })

或者使用

created() {  
    axios({method:'get',url:'http://localhost:8081/brand/getAll'}).then((resp)=> {
     this.brands = resp.data
    })

注意

 <tr v-for="item in brands">
        <td>{{item.id}}</td>
        <td>{{item.brandName}}</td>
        <td>{{item.companyName}}</td>
      </tr>

这里的id、brandName、companyName属性名要与后端[{“id”:1,“brandName”:“三只松鼠”,“companyName”:“三只松鼠股份有限公司”},{“id”:2,“brandName”:“华为”,“companyName”:“华为技术有限公司”},{“id”:3,“brandName”:“小米”,“companyName”:“小米科技有限公司”}]返回的数据名字一样

另外要解决热部署问题，在controller类上加入@CrossOrigin(origins = “*”,maxAge = 3600)注解，接可以在8080端口的服务上去访问其他端口的数据了