这个小dome简单来说的前后端分离，通过跨域调用接口来显示数据。

前端用到mui框架，主要来显示数据。

后端用到Java的springMVC，restful服务来做增删改查管理，

这里主要实现动态显示商品，剩下那些数据都是写固定的，不是动态的。

先看没有数据的的样子

前端的商品显示：

后台的管理：

 核心代码

package com.lch.kyu.Controller;

import com.lch.kyu.entity.Hungry;

import com.lch.kyu.service.HungryService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController

@RequestMapping(path = "/hungry")

public class HungryCo {

    @Autowired

    HungryService hungryService;

    //查询

    @RequestMapping(path = "", method = RequestMethod.GET)

    public AjaxState getAllHung() {

        List<Hungry> hungries=(hungryService.queryAllHungry());

        for (Hungry h:hungries

             ) {

            System.out.println(h.getName());

        }

        boolean result=hungries!=null;

        return new AjaxState(result?"success":"error",hungries,result?"获得数据成功！":"获得数据失败!");

    }

    //添加

    @RequestMapping(path = "", method = RequestMethod.POST)

    public AjaxState addhungry(@RequestBody Hungry hungry) {

        boolean result=hungryService.addHungry(hungry);

        return new AjaxState(result?"success":"error",hungry,result?"添加成功！":"添加失败");

    }

    //修改

    @RequestMapping(path = "", method = RequestMethod.PUT)

    public AjaxState updatehungry(@RequestBody Hungry hungry) {

        boolean result=hungryService.editHungry(hungry);

        return new AjaxState(result?"success":"error",hungry,result?"修改成功！":"修改失败");

    }

    //删除

    @RequestMapping(path = "/{id}", method = RequestMethod.DELETE)

    public AjaxState deleteHungryid(@PathVariable int id) {

        Boolean result=hungryService.deleteHungry(id);

        return new AjaxState(result?"success":"error",id,result?"删除成功！":"删除失败");

    }

}

class  AjaxState{

    public String state;

    public Object data;

    public String message;

    public AjaxState(String state, Object data, String message) {

        this.state = state;

        this.data = data;

        this.message = message;

    }

    public AjaxState(){}

}

注意：这里xml配置跨域，这里配置了跨域的端口号，前端那边才正常可以调用接口，要不然会报错。这里就举例了springMVC跨域，其实还有几个方法可以实现的。

                        <!--配置跨域的端口号-->

    <mvc:cors>

        <mvc:mapping path="/**"

             allowed-origins="http://127.0.0.1:8020,http://192.168.155.1:8020,http://192.168.2.105:8020,http://172.16.1.136:8020"

             allowed-methods="POST,GET, OPTIONS,DELETE,PUT"

             allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With"

             allow-credentials="true"/>

    </mvc:cors>

后台xml文件不配置端口号情况，相信做前后端的分离的人都见过这种情况

mui前端的代码，这里用的模板引擎来渲染页面

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>分布式应用</title>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <link rel="stylesheet" href="css/JavaScript.css" />

    <style>

    </style>

</head>

<body>

<div id="zui">

         <header class="mui-bar mui-bar-nav mui-bar-nav-bg herder-color">

               全国

             <a id="icon-menu" class="mui-action-back mui-pull-left">

             </a>

                   &nbsp; <a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color  color"></a>

            <h1 class="mui-title" id="mycss1">

                <!--<input type="search"  placeholder="输入商户名，产品名">

                <span class="mui-icon mui-icon-search"></span>-->

                <div class="mui-input-row ">

                        <input type="search" class="mui-input-clear" placeholder="输入商户名，产品名">

                </div>

            </h1>

        </header>

        <ul class="mui-table-view" id="center">

            <li class="mui-table-view-cell" id="tubiao">

                <div class="tjie">

                        <div class="tu1">

                                <img src="img/tb1.jpg" width="44" height="44"/>

                                <div>美食</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb2.jpg" width="44" height="44"/>

                                <div>猫眼电影</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb3.jpg" width="44" height="44"/>

                                <div>酒店</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb4.jpg" width="44" height="44"/>

                                <div>休闲娱乐</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb5.jpg" width="44" height="44"/>

                                <div>外卖</div>

                        </div>

                </div>

                    <div class="tjie">

                        <div class="tu1">

                                <img src="img/tb6.jpg" width="44" height="44"/>

                                <div>火锅</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb7.jpg" width="44" height="44"/>

                                <div>丽人</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb8.jpg" width="44" height="44"/>

                                <div>购物</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb9.jpg" width="44" height="44"/>

                                <div>周边游</div>

                        </div>

                        <div class="tu1">

                                <img src="img/tb10.jpg" width="44" height="44"/>

                                <div>KTV</div>

                        </div>

                </div>

            </li>

        </ul>

        <div id="dayi">

            <div class="dayi-o">

                <div class="dayi-right">

                    <div class="tt">好礼天天送</div>

                    <div class="ren">人人有奖领</div>

                </div>

                <div class="dayi-left">

                    <img src="img/tb11.jpg" width="55" height="55"/>

                </div>

            </div>

            <div class="dayi-o1">

                <div class="dayi-right">

                    <div class="tt">100%中奖</div>

                    <div class="ren1">送超豪华红包</div>

                </div>

                <div class="dayi-left">

                    <img src="img/tb12.jpg" width="55" height="55"/>

                </div>

            </div>

        </div>

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="artTemplate3/template.js" type="text/javascript" charset="utf-8"></script>

     <script src="js/mui.min.js"></script>

        <ul class="mui-table-view" id="tab">

        </ul>

              <script type="text/html" id="huns">

                  {{each list as pdt}}

                        <li class="mui-table-view-cell mui-media">

                               <div class="bj"><img src="data:images/{{pdt.pic}}" class="da" ></div>

                               <div class="name ">{{pdt.name}}</div>

                               <div class="address mui-ellipsis">{{pdt.address}}</div>

                               <div class="price">{{pdt.price | round:'￥'}}/<span class="meir">人</span>

                                       <span class="qian">

                                        <del>

                                            199

                                        </del>

                                    </span>

                               </div>

                                <div class="volume">已售：{{pdt.volume}}</div>

                        </li>

                  {{/each}}

               </script>

        <div id="footer">

           <nav class="mui-bar mui-bar-tab" id="foonter1">

                    <a class="mui-tab-item mui-active" href="#tabbar"  id="xin">

                        <span class="mui-icon mui-icon-home"></span>

                        <span class="mui-tab-label">首页</span>

                    </a>

                    <a class="mui-tab-item" href="#tabbar-with-chat">

                        <span class="mui-icon mui-icon-email"><span class="mui-badge">88</span></span>

                        <span class="mui-tab-label">添加</span>

                    </a>

                    <a class="mui-tab-item" href="#tabbar-with-contact">

                        <span class="mui-icon mui-icon-contact"><span class="mui-badge">12</span></span>

                        <span class="mui-tab-label">我的</span>

                    </a>

                    <a class="mui-tab-item" href="#tabbar-with-map">

                        <span class="mui-icon mui-icon-gear"></span>

                        <span class="mui-tab-label">设置</span>

                    </a>

            </nav>

        </div>

   </div>

    <script type="text/javascript" charset="utf-8">

var app = {

    //http://192.168.7.193:8020

    //http://192.168.155.1:8020

    init: function() {

        //为模板引擎定义辅助函数

        template.helper("round",function(value,mark){

            return (mark||"")+Math.round(value);

        }); //为模板引擎定义辅助函数

        this.query();

        this.sha();

    },    

    sha:function(){

        $("#xin").click(function(){

            /* location.href= location.reload();*/

            location.reload();

        });

    },

    query: function() {

        //192.168.155.1

        $.ajax("http://172.16.1.136:8080/hungry",{

            //type:请求方式

            type:"get" ,

            //服务器向客户端发送数据的类型,如：text,json

            dataType:"Json" ,

            success:function(data) {

                //alert(data);

                //console.log(data);

                $("#tab tr:not(:first)").remove();

                // $(data.data).each(function(index,hungry) {

                //     $("#tab").append("<tr align='center'><td>"+hungry.id+"</td><td><img src='images/"+hungry.pic+"' class='da'/></td><td>"+hungry.name+"</td><td>"+hungry.price+"</td><td>"+hungry.volume+"</td><td>"+hungry.address+"</td></tr>") ;

                // });

                $("#tab").append(template("huns",{list:data.data}));

            }

        });

    },

}

app.init();

    </script>

</body>

</html>

后台的页面的页面代码

大概把学的重点的东西列出来了，写了一次就加深自已的记忆。菜鸟笔记

mui与springMVC前后端分离的更多相关文章

  1. SpringMVC前后端分离交互传参详细教程

    温故而知新,本文为一时兴起写出,如有错误还请指正 本文后台基于SpringBoot2.5.6编写,前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试,用于理解前后端分离式开发的交互 ...

  2. springMVC前后端分离开发模式下支持跨域请求

    1.web.xml中添加cors规则支持(请修改包名) <filter> <filter-name>cors</filter-name> <filter-cl ...

  3. 前后端分离跨服务器文件上传-Java SpringMVC版

    近来工作上不上特别忙,加上对后台java了解一点,所以就抽时间,写了一个java版本的前后端分离的跨服务器文件上传功能,包括前后端代码. 一.Tomcat服务器部分 1.Tomcat服务器 单独复制一 ...

  4. 前后端分离开发,基于SpringMVC符合Restful API风格Maven项目实战（附完整Demo）！

    摘要: 本人在前辈<从MVC到前后端分离(REST-个人也认为是目前比较流行和比较好的方式)>一文的基础上,实现了一个基于Spring的符合REST风格的完整Demo,具有MVC分层结构并 ...

  5. SpringMVC+Spring+mybatis+maven+搭建多模块框架前后端分离开发框架的完整demo,拿走不谢。——猿实战02

            猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是 ...

  6. 前后端分离springmvc和RESTful理解

    1. 理解MVC MVC是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器. 其中,模型是用于封装数据的载体,例如,在Java中一般通过一个简单的POJO(P ...

  7. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...

  8. Spring Cloud 前后端分离后引起的跨域访问解决方案

    背景 Spring Cloud 微服务试点改造,目前在尝试前后端分离. 前台A应用(本机8080端口),通过网管(本机8769端口)调用后台应用B(本机8082端口).应用C发布的http服务.. A ...

  9. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

随机推荐

  1. koa2 的处理请求体koa-bodyparser koa-router 的中间件的学习

    1.官网 https://www.npmjs.com/package/koa-router https://www.npmjs.com/package/koa-bodyparser 2. demo / ...

  2. Java中的LinkedHashSet

  3. MySql查询结果按照指定顺序排序

    Mysql这功能做的很好用啊!! 让查询结果按照指定顺序排序 --------------------------------------------------------------------- ...

  4. PHP FILTER_SANITIZE_ENCODED 过滤器

    定义和用法 FILTER_SANITIZE_ENCODED 过滤器去除或 URL 编码不需要的字符. 该过滤器与 urlencode() 函数很类似. Name: "encoded" ...

  5. NX二次开发-UFUN打开本地文本文档uc4504

    NX9+VS2012 #include <uf.h> #include <uf_cfi.h> #include <uf_ui.h> using std::strin ...

  6. js 获取数组中的最大值和最小值

    var arr = [3,12,23,18,25,33,22,30,1] 方案一: 思想 首先对数组进行排序(小 >大),第一项为最小值,最后一项为最大值 var min; var max; a ...

  7. Wannafly Winter Camp Day8(Div1,onsite) E题 Souls-like Game 线段树 矩阵乘法

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog @ Problem:传送门  Portal  原题目描述在最下面.  简单的 ...

  8. int在64位操作系统中占多少位？

    仍然是32位. 曾经是这样的:16位操作系统中,int 占16位:在32位操作系统中,int 占32位.但是现在人们已经习惯了 int 占32位,因此在64位操作系统中,int 仍为32位.64位整型 ...

  9. goroutine 需要注意的一个小细节

    虽然goroutine 是并发执行的,但是它们并不是并行运行的.如果不告诉Go 额外的东西,同一时刻只会有一个goroutine 执行.利用runtime.GOMAXPROCS(n) 可以设置goro ...

  10. 微软引入了两种新的网络过滤系统，WFP和NDISfilter

    Windows 8是微软公司推出的最新的客户端OS,内部名称Windows NT 80.相对于Windows NT 5.x,其网络结构变化非常大,原有的TDI,NDIS系统挂接方法不再适用.在Wind ...