前后端分离之mockjs实战demo(代码片段)

关键词：

基于vue-cli+webpack的demo

项目结构

axios文件夹用来创建axios相关配置：

import axios from ‘axios‘
import vue from ‘vue‘
 
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘
 
// 请求拦截器
axios.interceptors.request.use(function(config) 
    return config;
  , function(error) 
    return Promise.reject(error);
  )
  // 响应拦截器
axios.interceptors.response.use(function(response) 
  return response;
, function(error) 
  return Promise.reject(error);
)
 
// 封装axios的post请求
export function fetch(url, params) 
  return new Promise((resolve, reject) => 
    axios.post(url, params)
      .then(response => 
        resolve(response.data);
      )
      .catch((error) => 
        reject(error);
      )
  )

 
export default 
  JH_news(url, params) 
    return fetch(url, params);
  

mock文件夹建立mock数据，配置mock请求：

// 引入mockjs
const Mock = require(‘mockjs‘);
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() 
    let articles = [];
    for (let i = 0; i < 10; i++) 
        let newArticleObject = 
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage(‘300x250‘, ‘mock的图片‘), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date()  // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；
        
        articles.push(newArticleObject)
    
 
    return 
        articles: articles
    

 
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock(‘/news/index‘, ‘post‘, produceNewsData);

HelloWorld.vue页面首页：

<template>
  <div class="index">
    <div v-for="(item, key) in newsListShow" :key="key">
      <news-cell
      :newsDate="item"
      ></news-cell>
    </div>
  </div>
</template>
 
<script>
import api from ‘js/axios/config‘
import NewsCell from ‘./NewsCell.vue‘
 
export default 
  name: ‘index‘,
  data () 
    return 
      newsListShow: [],
    
  ,
  components: 
    NewsCell
  ,
  created() 
    this.setNewsApi();
  ,
  methods:
    setNewsApi: function() 
      api.JH_news(‘/news/index‘, ‘type=top&key=123456‘)
      .then(res => 
        console.log(res);
        this.newsListShow = res.articles;
      );
    ,
  

</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

NewsCell.vue组件渲染数据：

<template>
  <div class="wrap">
    <div class="wrap-top">
      <h1>newsDate.title</h1>
      <span class="date">newsDate.date</span>
    </div>
    <div class="wrap-bottom">
      <span class="name">newsDate.author_name</span>
      <img :src="newsDate.thumbnail_pic_s" >
    </div>
  </div>
</template>
 
<script>
export default 
  name: ‘NewsCell‘,
  props: 
    newsDate: Object
  ,
  data () 
    return 
    
  ,
  computed: 
  ,
  methods: 
    jumpPage: function () 
      window.location.href = this.newsDate.url
    
  

</script>
 
<style scoped>
  .wrap
    width: 100%;
    font-size: 0.3rem;
  
  .wrap-top,.wrap-bottom
    display: flex;
    align-items: center;
    justify-content:space-between;
  
  h1
    width: 6rem;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  
  .date
    width: 4rem;
  
  .name
    flex: 1;
  
  img
    width: 10rem;
  
</style>

main.js入口文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
// 引入mockjs
require(‘js/mock/mock.js‘)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
  el: ‘#app‘,
  router,
  components:  App ,
  template: ‘<App/>‘
)

运行结果

更为详细的介绍：
Mock.js简易教程，脱离后端独立开发，实现增删改查功能

vue+mockjs模拟数据，实现前后端分离开发

在项目中尝试了mockjs，mock数据，实现前后端分离开发。关于mockjs，官网描述的是1.前后端分离2.不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。3.数据类型丰富4.通过随机数据，模拟各种场景。等等优点。总结... 查看详情

ssm前后端分离/不分离对比demo(代码片段)

...某些原因,整理了一个小的Demo，用于演示。个人认为在SSM前后端不分离的基础上在前端处理上比较麻烦一点之后就是注解的使用。总结一些对比,仅是自己掌握的,不够严谨,不足之处请大佬批评指正.路由控制:前后端分离的情况后... 查看详情

从零开始搭建django前后端分离项目系列五（实战之excel流式导出）(代码片段)

项目中有一处功能需求是：需要在历史数据查询页面进行查询字段的选择，然后由后台数据库动态生成对应的excel表格并下载到本地。 如果文件较小，解决办法是先将要传送的内容全生成在内存中，然后再一次性传入Response... 查看详情

jwt前后端分离demo(代码片段)

后端项目完整代码:https://github.com/shenweiquan/jwt-demo一：准备工作　　1-1运行环境：　　后端：jdk1.8，springboot，jwt　　前端：vue，elementui　　1-2创建前端和后端项目　　后端项目结构: 　　  二：重要的代码　　JwtUtilpacka... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一）什么是vue？1、渐进式框架是什么意思？2、为什么用vue而不是其他的前端框架？目前流行的前端框架：1）渐进式对比Angular：对比React：2）其他优势二）vue开发环境的搭建1、安... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一）什么是vue？1、渐进式框架是什么意思？2、为什么用vue而不是其他的前端框架？目前流行的前端框架：1）渐进式对比Angular：对比React：2）其他优势二）vue开发环境的搭建1、安... 查看详情

django开发之前后端分离开发模式(代码片段)

1.什么是前后端分离开发的概念:前端页面运行前端服务器上,负责页面的渲染(静态文件的加载)与跳转后端代码运行在后端服务器上,负责数据的处理(提供数据请求的接口)2.前后端分离开发碰到的问题那就是跨域请求的问题:什么是... 查看详情

前后端分离之jwt用户认证(代码片段)

  在前后端分离开发时为什么需要用户认证呢？原因是由于HTTP协定是不储存状态的(stateless)，这意味着当我们透过帐号密码验证一个使用者时，当下一个request请求时它就把刚刚的资料忘了。于是我们的程序就不知道谁是... 查看详情

springboot+vue+实战项目之第3集(代码片段)

...项目--锋迷商城1.《锋迷商城》业务流程设计-接⼝规范1.1前后端分离与单体架构流程实现的区别1.1.1单体架构1.1.2前后端分离架构1.2接口介绍1.2.1接口概念1.2.2接口规范1.3Swagger1.3.1作用1.3.2Swagger整合1.3.3Swagger注解说明1.3.4Swagger-ui插... 查看详情

ruoyi前后端分离式开源项目实战部署总结-环境搭建准备工作(代码片段)

《前后端分离式项目实战部署》这一系列的文章将从零讲解如何部署一个完整的开源项目。本教程是学习程序羊CodeSheep的视频《项目下载、运行、配置、构建、打包、部署：全步骤实战演示》。安利一波！！！非... 查看详情

layui：前后端分离之form表单(代码片段)

 页面效果图：   1<divstyle="display:none;"id="formContainer">2<formclass="layui-formmySearchForm"lay-filter="editForm">3<divclass="layui-form-item">4<labelclass="lay 查看详情

ruoyi前后端分离式开源项目实战部署总结-本地部署测试(代码片段)

...频教程做了服务器的部署。这篇文章主要介绍如何将Ruoyi前后端分离项目在本地跑起来，进行学习。一、前端1、vscode打开UI前端代码这里我们使用vscode这个软件进行开发首先创建一个目录和工作区。在这里我在任意一个地方... 查看详情

第二季springboot+vue前后端分离项目实战笔记(代码片段)

...在b站：【第二季】全网最简单但实用的SpringBoot+Vue前后端分离项目实战SpringBoot+Vue项目实战第二季一、些许优化刷新丢失其它标签页缓存已打开标签页tagsViewCache()window.addEventListener("beforeunload",()=>lettabViews=t... 查看详情

ruoyi前后端分离式开源项目实战部署总结-部署测试(代码片段)

这篇文章是介绍第二部分，将项目打包及部署到服务器上，并且修改相关配置。192.168.38.132-前端192.168.38.133-后端192.168.38.134-后端三台服务器分别创建/root/workspace目录一、前端192.168.38.132部署首先将ruoyi的前端代码打包然后... 查看详情

前后端分离之——接口数据返回---标准格式(代码片段)

开发中，如果前端和后端，在没有统一返回数据格式，我们来看一下会发生什么：后台开发人员A，在接口返回时，习惯返回一个返回码code=0000,然后返回数据；后台开发人员B，在接口返回时，习惯直接返回一个boolean类型的success=... 查看详情

springboot的前后端分离(代码片段)

后台：gitee：https://gitee.com/zhangjiqun/background-development-demo.gitdocway：http://www.docway.net/project/1ghALtt7cJt/1ghALw36HiK目录thymeleaf模板是在java中实现前端界面开发vue实现前后端的分离https://www 查看详情

精通系列）(代码片段)

Java之SpringBoot+Vue+ElementUI前后端分离项目（上-项目搭建）Java之SpringBoot+Vue+ElementUI前后端分离项目（中-功能完善-实现查询）Java之SpringBoot+Vue+ElementUI前后端分离项目（下-功能完善-发布文章 查看详情

使用vue+jfinal框架搭建前后端分离系统(代码片段)

前后端分离作为Web开发的一种方式，现在应用越来越广泛。前端一般比较流行Vue.js框架，后端框架比较多，网上有很多Vue+SpringMVC前后端分离的demo，但是Vue+JFinal框架貌似没有搜到，本文基于Vue.js和JFinal框架，给出了搭建了一个前... 查看详情