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

第一步:maven搭建后端JFinal部分

1、用maven新建web项目,项目名vue-jfinal

2、添加JFinal框架和jetty容器等依赖

        <dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.jfinal</groupId>
<artifactId>jfinal</artifactId>
<version>3.3</version>
</dependency>
<dependency>
<groupId>com.jfinal</groupId>
<artifactId>jetty-server</artifactId>
<version>8.1.8</version>
<scope>provided</scope>
</dependency>

3、修改web.xml

<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app>
<display-name>Archetype Created Web Application</display-name>
<filter>
<filter-name>jfinal</filter-name>
<filter-class>com.jfinal.core.JFinalFilter</filter-class>
<init-param>
<param-name>configClass</param-name>
<param-value>common.demoConfig</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>jfinal</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

4、在src/main/java中新建controller的Package添加demoController.java

package controller;

import com.jfinal.core.Controller;

public class demoController extends Controller {
public void index() {
//跨域请求设置
getResponse().addHeader("Access-Control-Allow-Origin", "*");
renderJson("{\"age\":25,\"name\":\"huiliuyi\"}");
}
}

5、在src/main/java中新建common的Package添加demoConfig.java

package common;

import com.jfinal.config.Constants;
import com.jfinal.config.Handlers;
import com.jfinal.config.Interceptors;
import com.jfinal.config.JFinalConfig;
import com.jfinal.config.Plugins;
import com.jfinal.config.Routes;
import com.jfinal.core.JFinal;
import com.jfinal.template.Engine; import controller.demoController; public class demoConfig extends JFinalConfig { @Override
public void configConstant(Constants arg0) {
arg0.setDevMode(true);
} @Override
public void configEngine(Engine arg0) {
// TODO Auto-generated method stub } @Override
public void configHandler(Handlers arg0) {
// TODO Auto-generated method stub } @Override
public void configInterceptor(Interceptors arg0) {
// TODO Auto-generated method stub } @Override
public void configPlugin(Plugins arg0) {
// TODO Auto-generated method stub } @Override
public void configRoute(Routes arg0) {
arg0.add("/demo", demoController.class);
} public static void main(String[] args) {
JFinal.start("src/main/webapp", 8081, "/", 5);
}
}

6、运行demoConfig.java文件,run as Java Applicaiton,如下图,则后端搭建完毕

在Eclipse Version: Oxygen.1 Release (4.7.1)中项目目录如下:

第二步:使用vue-cli搭建vue.js前端部分

1、安装vue-cli

npm install --global vue-cli

2、创建一个基于webpack模板的项目

vue init webpack vue-jfinal

接下来会有一些yes/no的选项,按下图设置

3、进入项目目录,安装vue-resource插件

cd vue-jfinal
npm install vue-resource

4、使用webstorm打开vue-jfinal,项目目录如下图,并设置Run/Debug Configuration

4、在main.js中添加vue-resource的引用

原文件

// 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' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

添加后:

// 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'
import VueResource from 'vue-resource'
Vue.use(VueResource) Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

5、修改vue-jfinal项目中App.vue文件

原文件

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template> <script>
export default {
name: 'App'
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

修改后:

<template>
<div id="app">
<img src="./assets/logo.png">
<h1>服务端数据为:{{serverData}}</h1>
<button v-on:click="getdata()">获得服务器端数据</button>
<router-view/>
</div>
</template> <script>
export default {
name: 'App',
data(){
return {
serverData:"页面数据"
}
},
methods:{
getdata(){
this.$http.get('http://localhost:8081/demo').then(function(response){
this.serverData=response.data
})
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

第三步:测试前后端分离

1、在webstorm中点击run按钮,浏览器中输入http://localhost:8080访问,出现下面界面则前端搭建成功

2、点击 获得后端数据按钮,出现下图则表示获得后端数据成功

第四步:将jfinal项目和vue项目放在同一个项目目录下,目录截图

git连接:https://github.com/Feynman61/vue-jfinal.git

总结:

前后端分离的开发模式现在已经非常普遍了,优点也很明了,就是将前后端开发人员的工作分离开,这样前后端开发人员就能专注于自己的工作,提高开发效率。

如果大家在实际操作中有什么问题,欢迎大家留言评论,我会第一时间回复大家。

使用Vue+JFinal框架搭建前后端分离系统的更多相关文章

  1. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  2. 【手摸手,带你搭建前后端分离商城系统】01 搭建基本代码框架、生成一个基本API

    [手摸手,带你搭建前后端分离商城系统]01 搭建基本代码框架.生成一个基本API 通过本教程的学习,将带你从零搭建一个商城系统. 当然,这个商城涵盖了很多流行的知识点和技术核心 我可以学习到什么? S ...

  3. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

  4. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  5. 【手摸手,带你搭建前后端分离商城系统】03 整合Spring Security token 实现方案,完成主业务登录

    [手摸手,带你搭建前后端分离商城系统]03 整合Spring Security token 实现方案,完成主业务登录 上节里面,我们已经将基本的前端 VUE + Element UI 整合到了一起.并 ...

  6. 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境

    前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...

  7. 从零开始搭建前后端分离的NetCore(EF Core CodeFirst+Au)+Vue的项目框架之二autofac解耦

    在 上一篇 中将项目的基本骨架搭起来能正常跑通,这一篇将讲到,如何通过autofac将DbContext和model进行解耦,只用添加model,而不用在DbContext中添加DbSet. 在这里就 ...

  8. ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

    一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...

  9. dotnet core webapi +vue 搭建前后端完全分离web架构

    架构 服务端采用 dotnet core  webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可 ...

随机推荐

  1. Python数据类型-5 元组

    元组 我们知道,用方括号括起来的是列表,那么用圆括号括起来的是什么,是元组. 元组也是序列结构,但是是一种不可变序列,你可以简单的理解为内容不可变的列表.除了在内部元素不可修改的区别外,元组和列表的用 ...

  2. 凭什么相信 5G 很安全?

    导读 电信行业及其专家指责科学家说,他们研究的5G无线技术所带来的手机辐射制造了恐慌.由于我们的许多研究工作都是由公共资助的,因此我们相信从道德的角度来看,我们有责任告知公众,经过同行评审的科学文献究 ...

  3. Systemverilog for design 笔记(四)

    转载请标明出处 数组.结构体和联合体 1. 结构体(struct) 1.1. 结构体声明 结构体默认是变量,也可以声明为线网 var struct { // 通过var进行结构体变量声明 logic ...

  4. Python正则表达式就是这么简单【新手必学】

    一前言本篇文章带大家快速入门正则表达式的使用,正则表达式的规则不仅适用python语言,基本大多数编程语言都适用,在日常使用中极为广泛,读者们有必要学好正则表达式.看完这篇文章,读者们要理解什么是正则 ...

  5. Flask - 上下文管理(核心)

    参考 http://flask.pocoo.org/docs/1.0/advanced_foreword/#thread-locals-in-flask https://zhuanlan.zhihu. ...

  6. 对iOS开发的一些认识

    从事iOS工作这么久了,我觉得对它的认识也越来越深刻.尤其是越发明白自己从事的工作属于“客户端开发”.“软件工程”分类中. 我更喜欢“客户端开发”这个词语,相对“前端开发”而言.因为前者更能充分说明面 ...

  7. 暑假周进度报告(三)-------版本过高后续问题处理,eclipse编译运行MapReduce以及Hadoop学习

    问题一:Hadoop版本太高 卸载Hadoop3.2.0 我改安装了Hadoop 2.7.7 如果没有权限下载.可以采用如下方式: 卸载完成以后返回原目录即可 后面的jdk卸载也可以采用这种方式. 按 ...

  8. nrm 源管理器

    什么是nrm nrm 是一个 npm 源管理器,允许你快速地在 npm 源间切换. 安装nrm 在命令行执行命令,npm install -g nrm,全局安装nrm. 使用 执行命令nrm ls查看 ...

  9. 学习打卡8:循环语句for、while

    流程图: /*循环结构的基本组成部分,一般可以分成四部分:1.初始化语句:在循环开始最初执行,而且只做唯一一次.2.条件判断:如果成立,则循环继续:如果不成立,则循环退出.3.循环体:重复要做的内容, ...

  10. 图片IO域 旋转画面的组态 图片是4个静止的风扇 PLC的MW6为风扇指针..

    图片IO域 旋转画面的组态 图片是4个静止的风扇 PLC的MW6为风扇指针.. Plc在循环中断组织块 OB35 中 将MW6 每100ms 加1 加到4 清0 图片[MW6] MW6 是图片指针 对 ...