精华内容
下载资源
问答
  • 最近在利用空闲的时间学习springboot+Vue前后端分离相关知识,然后动手写了个后台管理系统,实现登录验证、学生模块、英雄联盟模块、数据可视化(暂未开发,准备使用echarts进行);这边先以英雄联盟模块为例介绍,...

           最近在利用空闲的时间学习springboot+Vue前后端分离相关知识,然后动手写了个后台管理系统,实现登录验证、学生模块、英雄联盟模块、数据可视化(暂未开发,准备使用echarts进行);这边先以英雄联盟模块为例介绍,完整的代码上传至GitHub上,地址:https://github.com/evanZhangYiFeng/SpringBoot/tree/master/SpringBoot%2BVue

    简单的后台管理系统如下截图所示(以英雄联盟模块为例,学生管理模块增删改查功能已实现):

    欢迎大家下载参考,如有什么不对的地方还请多多指教了

    1. 使用Maven创建一个SpringBoot后端项目,目录结构如下,同时在src/main/java文件夹下创建如下几个包:

    2. 创建英雄属性实体类:

    package com.Springboot.Vue.entity;
    
    public class heroProperty {
    	private Integer id;
    	private String name;
    	private Integer money;
    	private Integer attack;    //攻击力
    	private Integer magic;     //法强
    	private Integer suck_blood;    //物理吸血
    	private Integer magic_blood;    //法术吸血
    	private Integer physical_penetration;    //物穿
    	private Integer magic_penetration;       //法穿
    	private Integer crit;                    //暴击
    	private Integer blood;                   //生命值
    	private Integer armor;                   //护甲
    	private Integer spell;                   //魔抗
    	private String equip1;                   //装备1-6
    	private String equip2;
    	private String equip3;
    	private String equip4;
    	private String equip5;
    	private String equip6;
    	private String skill1;                  //技能1名称
    	private Integer damage1;                //技能1伤害
    	private String skill2;
    	private Integer damage2;
    	private String skill3;
    	private Integer damage3;
    //省略getter和setter方法
    }

    3.创建mybatis映射接口

    package com.Springboot.Vue.Mapper;
    
    import java.util.List;
    
    import org.apache.ibatis.annotations.Mapper;
    
    import com.Springboot.Vue.entity.heroProperty;
    
    @Mapper
    public interface heroPropertyMapper {
    	public List<heroProperty> getAllHero();
    	
    	//public heroProperty getHeroByName();
    	
    	//添加英雄
    	public Integer addHero(heroProperty hero);
    	
    	//更新属性
    	public Integer updateHeroInfo(heroProperty hero);
    	
    }	
    

    4.controller层数据解析返回前端

    package com.Springboot.Vue.controller;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.PutMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.Springboot.Vue.Mapper.heroPropertyMapper;
    import com.Springboot.Vue.entity.heroProperty;
    
    import net.sf.json.JSONArray;
    import net.sf.json.JSONObject;
    
    @Controller
    public class heroController {
    	@Autowired
    	heroPropertyMapper heroMapper;
    	
    	//获得所有英雄列表
    	@ResponseBody
    	@CrossOrigin
    	@GetMapping("/getAllHero")
    	public List<heroProperty> getAllHero() {
    		/*
    		 * JSONArray array = new JSONArray(); JSONObject object = new JSONObject();
    		 */
    		List<heroProperty> list = heroMapper.getAllHero();
    		/*
    		 * for(int i=0;i<list.size();i++) { object.put("id", list.get(i).getId());
    		 * object.put("name", list.get(i).getName()); array.add(object); }
    		 */
    		 
    		return list;
    	}
    	
    	//新增英雄
    	@ResponseBody
    	@CrossOrigin
    	@PostMapping("/insertHero")
    	public Integer insertHero(@RequestBody String heroString) {
    		System.out.println(heroString);
    		heroProperty hero = (heroProperty) JSONObject.toBean(JSONObject.fromObject(heroString), heroProperty.class);
    		return heroMapper.addHero(hero);
    	}
    	
    	//英雄购买装备后更新英雄属性
    	@ResponseBody
    	@CrossOrigin
    	@PutMapping("/updateHeroInfo")
    	public Integer updateHeroInfo(@RequestBody String heroString) {
    		System.out.println(heroString);
    		heroProperty hero = (heroProperty) JSONObject.toBean(JSONObject.fromObject(heroString), heroProperty.class);
    		return heroMapper.updateHeroInfo(hero);
    	}
    }
    

     

    二:前端Vue使用npm生成脚手架进行开发,如有对Vue安装有不清楚的同学,我在Gitub上上传了自己整理的安装手册,或者在CSDN搜索参考其他人的安装文档

    Vue项目结构如下(没有在组件目录下进行分类,显得比较臃肿难看,下次注意):

    这边暂时一个英雄属性界面为例,代码如下:

    <template>
      <!--英雄属性-->
      <div id="main">
        <el-row class="el-row-main">
          <main-left></main-left>
          <main-top></main-top>
          <div style="position:absolute;margin-bottom: 10px;margin-top: 10px;margin-left: 17%;width: 83%;">
            <el-input id="idOrName" v-model="input" placeholder="请输入id或者名字" size="mini" style="width: 20%;margin-left: 10px"></el-input>
            <el-button type="success" icon="el-icon-search" size="mini" @click="getAllHero">搜索</el-button>
            <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="getHeroInfo">新增</el-button>
            <div>
              <el-dialog title="新增英雄" :visible.sync="dialogFormVisible" width="70%" >
                <el-form :model="form" style="margin-left: -20%">
                  <el-form-item :label-width="formLabelWidth">
                    <el-input v-model="form.id" style="width: 23%;margin-left: 10%;" size="mini">
                      <template slot="prepend">英雄序号</template>
                    </el-input>
                    <el-input v-model="form.physical_penetration" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">物理穿透</template>
                    </el-input>
                    <el-input v-model="form.damage1" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">技能1伤害</template>
                    </el-input>
                  </el-form-item>
    
                  <el-form-item :label-width="formLabelWidth" style="margin-top: -2%">
                    <el-input v-model="form.name" style="width: 23%;margin-left: 10%;" size="mini">
                      <template slot="prepend">英雄名称</template>
                    </el-input>
                    <el-input v-model="form.magic_penetration" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">法术穿透</template>
                    </el-input>
                    <el-input v-model="form.skill2" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">技能2</template>
                    </el-input>
                  </el-form-item>
    
                  <el-form-item :label-width="formLabelWidth" style="margin-top: -2%">
                    <el-input v-model="form.money" style="width: 23%;margin-left: 10%;" size="mini" placeholder="初始金币">
                      <template slot="prepend">英雄金币</template>
                    </el-input>
                    <el-input v-model="form.crit" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">&nbsp;暴击率&nbsp;&nbsp;</template>
                    </el-input>
                    <el-input v-model="form.damage2" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">技能2伤害</template>
                    </el-input>
                  </el-form-item>
    
                  <el-form-item :label-width="formLabelWidth" style="margin-top: -2%">
                    <el-input v-model="form.attack" style="width: 23%;margin-left: 10%;" size="mini" placeholder="初始攻击力">
                      <template slot="prepend">&nbsp;攻击力&nbsp;&nbsp;</template>
                    </el-input>
                    <el-input v-model="form.blood" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">&nbsp;&nbsp;&nbsp;血量&nbsp;&nbsp;&nbsp;</template>
                    </el-input>
                    <el-input v-model="form.skill3" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">技能3</template>
                    </el-input>
                  </el-form-item>
    
                  <el-form-item :label-width="formLabelWidth" style="margin-top: -2%">
                    <el-input v-model="form.magic" style="width: 23%;margin-left: 10%;" size="mini" placeholder="初始法强">
                      <template slot="prepend">魔法强度</template>
                    </el-input>
                    <el-input v-model="form.armor" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">&nbsp;&nbsp;&nbsp;护甲&nbsp;&nbsp;&nbsp;</template>
                    </el-input>
                    <el-input v-model="form.damage3" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">技能3伤害</template>
                    </el-input>
                  </el-form-item>
    
                  <el-form-item :label-width="formLabelWidth" style="margin-top: -2%">
                    <el-input v-model="form.suck_blood" style="width: 23%;margin-left: 10%;" size="mini">
                      <template slot="prepend">物理吸血</template>
                    </el-input>
                    <el-input v-model="form.spell" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">&nbsp;&nbsp;&nbsp;魔抗&nbsp;&nbsp;&nbsp;</template>
                    </el-input>
                  </el-form-item>
    
                  <el-form-item :label-width="formLabelWidth" style="margin-top: -2%">
                    <el-input v-model="form.magic_blood" style="width: 23%;margin-left: 10%;" size="mini">
                      <template slot="prepend">法术吸血</template>
                    </el-input>
                    <el-input v-model="form.skill1" style="width: 23%;margin-left: 5%;" size="mini">
                      <template slot="prepend">&nbsp;&nbsp;&nbsp;技能1&nbsp;&nbsp;&nbsp;</template>
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addHero" >确 定</el-button>
                </div>
              </el-dialog>
            </div>
    
          </div>
          <div style="margin-top: 5%;height:75%">
            <!--分页操作-->
            <el-table :data="heroList.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="float: right; width: 83%;">
              <el-table-column width="80px" property="number" label="序号" type="index" sortable align="center" ></el-table-column>
              <el-table-column width="80px" property="name" label="名字" align="center"></el-table-column>
              <el-table-column width="80px" property="attack" label="攻击力" align="center"></el-table-column>
              <el-table-column width="80px" property="magic" label="法强" align="center"></el-table-column>
              <el-table-column width="80px" property="blood" label="生命值" align="center"></el-table-column>
              <el-table-column width="80px" property="armor" label="物抗" align="center"></el-table-column>
              <el-table-column width="80px" property="spell" label="魔抗" align="center"></el-table-column>
              <el-table-column width="80px" property="crit" label="暴击" align="center"></el-table-column>
              <el-table-column width="80px" property="suck_blood" label="物理吸血" align="center"></el-table-column>
              <el-table-column width="80px" property="magic_blood" label="法术吸血" align="center"></el-table-column>
              <el-table-column width="80px" property="money" label="金币" align="center"></el-table-column>
              <el-table-column width="130px" label="查看详情" align="center">
                <template slot-scope="scope">
                  <el-button type="warning" icon="el-icon-edit" size="mini" v-on:click="getDetailMsg(scope.row.name)">查看详情</el-button>
                </template>
              </el-table-column>
              <el-table-column width="100px" label="装备操作" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-goods" size="mini" @click.prevent="addAndUpgrade(scope.row)">操作</el-button>
                  <!--增加装备-->
                  <div>
                    <el-dialog title="选择装备装配" :visible.sync="openEqpForm" width="45%" >
                      <el-form>
                        <el-form-item :label-width="equipFormWidth">
                          <el-radio v-model="radio" :label="1" @change="getTrueOrFalse">攻击装</el-radio>
                          <el-select id="eqp_Id" style="width: 40%;margin-left: -5%" :disabled= flag
                                     v-model="selected1" value-key="eqp_name" @change="getSelectEqpInfo">
                            <el-option v-for="item in equipList" :label="item.eqp_name" :value="item"></el-option>
                          </el-select>
                          <br>
                          <el-radio style="margin-top: 5%" v-model="radio" :label="2" @change="getTrueOrFalse">防御装</el-radio>
                          <el-select style="width: 40%;margin-left: -5%" :disabled= !flag
                                     v-model="selected2" value-key="eqp_name" @change="getSelectEqpInfo">
                            <el-option v-for="item in equipDefenseList" :label="item.eqp_name" :value="item"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="openEqpForm = false">取 消</el-button>
                        <el-button type="primary" @click="buyEquip" >购买装备</el-button>
                      </div>
                    </el-dialog>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
      </div>
    </template>
    
    <script>
        export default {
            name: "HeroProperty",
            created(){
              this.getEquipList();
              this.getEquipDefenseList();
            },
            data(){
                return{
                    radio: 1,
                    selected1: {},
                    selected2: {},
                    flag: false,        //true和false用来设置攻击装可选时防御装不可选,反之亦然
                    openEqpForm: false,
                    formLabelWidth: '100px',
                    equipFormWidth: '60px',
                    dialogFormVisible: false,
                    currentPage: 1,
                    pageSize: 4,     //每页显示数量
                    currentShow: '',     //当前显示的数据
                    input: '',
                    heroList: [],
                    equipList: [],
                    equipDefenseList: [],
                    form:{
                        id: '',  name: '',  money: '',  attack: '',
                        magic: '',  suck_blood: '',  magic_blood: '', physical_penetration: '',
                        magic_penetration: '', crit: '', blood: '', armor: '',
                        spell: '', equip1: '', equip2: '', equip3: '',
                        equip4: '', equip5: '', equip6: '', skill1: '',
                        damage1: '', skill2: '', damage2: '', skill3: '', damage3: ''
                    },
                    baseAttack: '',                   //基础攻击力、法强、伤害,计算技能伤害需要额外攻击力
                    baseMagic: '',
                    baseDamage1: '',
                    baseDamage2: '',
                    baseDamage3: '',
                }
            },
            methods:{
                //封装英雄对象
                getHeroInfo(){
                    this.dialogFormVisible = true;
                },
                //新增英雄
                addHero(){
                    var heroObject = {
                        id: this.form.id, name: this.form.name,
                        money: this.form.money, attack: this.form.attack,
                        magic: this.form.magic, suck_blood: this.form.suck_blood,
                        magic_blood: this.form.magic_blood, physical_penetration: this.form.physical_penetration,
                        magic_penetration: this.form.magic_penetration, crit: this.form.crit,
                        blood: this.form.blood, armor: this.form.armor,
                        spell: this.form.spell, equip1:this.form.equip1 != "" ? this.form.equip1: '',
                        equip2: this.form.equip2 != "" ? this.form.equip2: '',
                        equip3: this.form.equip3 != "" ? this.form.equip3: '',
                        equip4: this.form.equip4 != "" ? this.form.equip4: '',
                        equip5: this.form.equip5 != "" ? this.form.equip5: '',
                        equip6: this.form.equip6 != "" ? this.form.equip6: '',
                        skill1: this.form.skill1, damage1: this.form.damage1,
                        skill2: this.form.skill2, damage2: this.form.damage2,
                        skill3: this.form.skill3, damage3: this.form.damage3
                    };
                    console.log(heroObject);
                    //将新建英雄时的基础基础攻击力、法强和基础伤害存起来
                    localStorage.setItem("baseAttack",this.form.attack);
                    localStorage.setItem("baseMagic",this.form.magic);
                    localStorage.setItem("baseDamage1",this.form.damage1);
                    localStorage.setItem("baseDamage2",this.form.damage2);
                    localStorage.setItem("baseDamage3",this.form.damage3);
                    this.axios.post(
                      "http://localhost:8085/insertHero",heroObject
                    ).then( (response) =>{
                        if(response.data === 1){
                            console.log(response.data);
                            this.$message({
                                message: '新英雄创造成功',
                                type: 'success'
                            })
                            this.getAllHero();
                        }else{
                            this.$message({
                                message: '新英雄创造失败',
                                type: 'warning'
                            })
                        }
                        this.dialogFormVisible = false;      //关闭对话框
                    })
                },
                getTrueOrFalse(){
                    if(this.radio === 1){
                        this.flag = false;
                    }else{
                        this.flag = true;
                    }
                },
                //获得所有英雄
                getAllHero(){
                    var text = this.input === "" ? this.input:'';    //获得输入框内容
                    console.log("查询条件:"+text);
                    this.axios.get(
                        "http://localhost:8085/getAllHero",text
                    ).then( (response) =>{
                        this.heroList = response.data;
                        console.log(response.data);
                        localStorage.setItem("heroList",JSON.stringify(this.heroList));
                    })
                },
    
                //通过名称查看该英雄详细信息(由于时间问题功能暂未实现,有兴趣的小伙伴可以自己增加实现)
                getDetailMsg(name){
                },
                
                //根据英雄操作装备增加升级
                addAndUpgrade(object){
                    this.openEqpForm = true;
                    localStorage.setItem("heroInfo",JSON.stringify(object));
                    //console.log("英雄信息:"+object.name);
                },
                //获得所有攻击装备
                getEquipList(){
                    this.axios.get(
                        "http://localhost:8085/getAllEquip"
                    ).then( (response) =>{
                        this.equipList = response.data;
                        console.log(this.equipList);
                    })
                },
                //获取所有防御装备
                getEquipDefenseList(){
                    this.axios.get(
                        "http://localhost:8085/getAllEqpDefense"
                    ).then( (response) =>{
                        this.equipDefenseList = response.data;
                        console.log(this.equipDefenseList);
                    })
                },
    
                //获得选中装备的信息:攻击装或者防御装
                getSelectEqpInfo(){
                    var equip = this.selected1;
                    var equipDefense = this.selected2;
                    localStorage.setItem("equipInfo",JSON.stringify(equip));
                    localStorage.setItem("equipDefense",JSON.stringify(equipDefense));
                },
                //点击购买攻击装备按钮
                buyEquip(){
                    //获取选中装备的信息
                    var equipInfo = JSON.parse(localStorage.getItem("equipInfo"));
                    var equipDefense = JSON.parse(localStorage.getItem("equipDefense"));
                    localStorage.removeItem("equipInfo");
                    console.log("想要购买的装备信息:"+equipInfo);
                    //先获取当前英雄信息,金币是否足够
                    var hero = JSON.parse(localStorage.getItem("heroInfo"));     //将字符串转化为json对象
                    console.log("获取的英雄信息:"+hero.money);
                    //获取基础攻击力和伤害、生命值、抗性
                    this.baseAttack = localStorage.getItem("baseAttack");
                    this.baseMagic = localStorage.getItem("baseMagic");
                    this.baseDamage1 = localStorage.getItem("baseDamage1");
                    this.baseDamage2 = localStorage.getItem("baseDamage2");
                    this.baseDamage3 = localStorage.getItem("baseDamage3");
                    if(hero.money >= equipInfo.eqp_money || hero.money >= equipDefense.eqp_money){                //当英雄拥有的金币大于装备价值时,才可以进行购买
                        hero.attack += equipInfo.eqp_attack;
                        hero.magic += equipInfo.eqp_magic;
                        hero.suck_blood += equipInfo.eqp_suck_blood;
                        hero.magic_blood += equipInfo.eqp_magic_blood;
                        hero.physical_penetration += equipInfo.eqp_physics_penetration;
                        hero.magic_penetration += equipInfo.eqp_magic_penetration;
                        hero.crit += equipInfo.eqp_crit;
                        hero.money -= equipInfo.eqp_money;
                        //防御属性增加
                        /*hero.blood += equipDefense.blood;
                        hero.armor += equipDefense.armor;
                        hero.spell += equipDefense.spell;*/
                        if(hero.magic === '' || hero.magic === 0 || hero.magic === null){
                            //物理技能伤害计算
                            hero.damage1 = 1.0*(hero.attack - Number(this.baseAttack)) + Number(this.baseDamage1);
                            hero.damage2 = 0.9*(hero.attack - Number(this.baseAttack)) + Number(this.baseDamage2);
                            hero.damage3 = 1.2*(hero.attack - Number(this.baseAttack)) + Number(this.baseDamage3);
                        }else{
                            //法师技能伤害计算
                            hero.damage1 = 0.8*(hero.magic - Number(this.baseMagic)) + Number(this.baseDamage1);
                            hero.damage2 = 0.7*(hero.magic - Number(this.baseMagic)) + Number(this.baseDamage2);
                            hero.damage3 = 1.0*(hero.magic - Number(this.baseMagic)) + Number(this.baseDamage3);
                        }
                        //给英雄的6个装备属性依次附上装备
                        const arr = [               //将6个装备封装为数组依次遍历然后填充装备
                            hero.equip1, hero.equip2, hero.equip3,
                            hero.equip4, hero.equip5, hero.equip6
                        ];
                        for(let i=0;i<arr.length;i++){
                            if(arr[i] === null || arr[i] === ''){
                                let index = 'equip'+(i+1).toString();
                                hero[index] = equipInfo.eqp_name;
                                console.log(hero.equip1);
                                break;                      //退出当前循环,执行for循环后面的代码
                            }
                        }
                        hero.equip1 = hero.equip1 != null ? hero.equip1 : '';
                        hero.equip2 = hero.equip2 != null ? hero.equip2 : '';
                        hero.equip3 = hero.equip3 != null ? hero.equip3 : '';
                        hero.equip4 = hero.equip4 != null ? hero.equip4 : '';
                        hero.equip5 = hero.equip5 != null ? hero.equip5 : '';
                        hero.equip6 = hero.equip6 != null ? hero.equip6 : '';
                        console.log("英雄新属性:"+hero);
                        this.axios.put(
                            "http://localhost:8085/updateHeroInfo",hero
                        ).then( (response) =>{
                            if(response.data === 1){
                                this.$message({
                                    message: '购买成功',
                                    type: 'success'
                                });
                                this.getAllHero();
                                this.openEqpForm = false;
                            }
                        });
                    }else{
                        this.$message({
                            message: '金币不足,请先刷兵或者击杀其他英雄',
                            type: 'warning'
                        });
                        return;
                    }
                }
            }
        }
    </script>
    
    <style scoped>
      @import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");
      #main{
        width: 100%;
        height: 100%;
        position: absolute;
      }
      .el-row-main {
        height: inherit;
      }
      #el-button{
        margin-right: 2%;
        float: right
      }
    </style>
    

    最后在eclipse和webstorm分别启动前后端,系统正常运行;(如果需要部署到环境上,可以下载Nginx(无需配置,运行即可)作为反向代理服务;打包Vue项目,运行: npm run build Vue项目生成dist文件夹,将文件夹下的static文件夹和index.js复制到Nginx解压目录 下的html文件夹下,并且将SpringBoot项目导出jar包,以 java -jar 命令启动Springboot服务即可);

    更多详情介绍请点击GitHub链接:https://github.com/evanZhangYiFeng/SpringBoot/tree/master/SpringBoot%2BVue

    最后祝愿每位开发者开心健康每一天!

     

    展开全文
  • 跨域方式有两种配置,一种是前端,一种是后端配置 在接口层加入 : @CrossOrigin 注解。

    跨域方式有两种配置,一种是前端,一种是后端配置

    在接口层加入 : @CrossOrigin 注解。

     

    展开全文
  • public class CustomCorsFilter extends OncePerRequestFilter { @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterCh...
    public class CustomCorsFilter extends OncePerRequestFilter {
    
        @Override
        protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
    
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization, token");
            response.setHeader("Access-Control-Allow-Credentials", "true");
    
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
            filterChain.doFilter(request, response);
        }
    }
    @Configuration
    public class CorsConfig {
    
        @Bean
        public FilterRegistrationBean customCorsfilterRegistrationBean() {
            FilterRegistrationBean<CustomCorsFilter> filterRegistrationBean = new FilterRegistrationBean<>();
            filterRegistrationBean.setFilter(new CustomCorsFilter());
            filterRegistrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);
            filterRegistrationBean.addUrlPatterns("/*");
    
            return filterRegistrationBean;
        }
    }

     

    转载于:https://www.cnblogs.com/dingyingsi/p/11561430.html

    展开全文
  • 1.在tomcat下新建一个base文件夹,用于存放vue build的文件 2.在项目运行“npm build,生成dist文件夹,dist文件夹中包含static和index.html 3.将上面的文件复制到tomcat下新建的base内 4.启动tomcat ...

    1.在tomcat下新建一个base文件夹,用于存放vue build的文件

    2.在项目运行“npm build,生成dist文件夹,dist文件夹中包含static和index.html

     

    3.将上面的文件复制到tomcat下新建的base内

     

    4.启动tomcat

     

    5.本地port为8080, 输入http://localhost:8080/base/

     

    6.启动成功。(和部署war包项目差不多)

    展开全文
  • 小区物联网平台是前后端完全开源并免费商用的物联网平台,前段采用主流vue+elementui+admin 后端采用spring boot,项目是特别简单架构容易上手对接自己的硬件,欢迎加关注后私信交流代码说明back 为后端项目 建议用...
  • 项目简介 首先在于灵活运用springboot 掌握spring security核心 学会使用vue ...前后vue工程也可以作为项目开发脚手架。 效果 源码 https://gitee.com/niugangxy/springsecurityforspringboot ...
  • 小区物联网平台是前后端完全开源并免费商用的物联网平台,前段采用主流vue+elementui+admin 后端采用spring boot,项目是特别简单架构容易上手对接自己的硬件,欢迎加关注后私信交流代码说明back 为后端项目 建议用...
  • 1.打包vue项目的生产环境 到vue项目的目录下执行以下指令 npm run build:prod 打包完成后在vue项目的目录下生成一个名为dist的文件,里面主要是主要的html页面和css、js、字体和图片等静态资源 通过FileZilla将...
  • 项目就自动停止了, 运行这个命令,nohup java -jar jar包的名字.jar >temp.txt & ,项目就可以在后台启动,关闭xshell没有影响 7、前端项目部署到服务器 npm run build 把Vue打包成单页面的HTML 上传到 /usr/local/...
  • springboot+vue前后端分离开发项目源码
  • 基于springboot+vue前后端分离的增删改查,使用了idea+maven+mysql,代码清楚简单,先启动vue项目,再启动springboot就会自动连接前后端。
  • 项目地址: c http://c.himygirl.cn 扫码APP下载: m: http://m.himygirl.cn 源码地址: https://gitee.com/venfu/modules https://gitee.com/venfu/mygirl-c-web ......
  • 此项目是基于SpringBoot+Vue前后端分离开发基础项目,非常简单.使用前记得npm install
  • SpringBoot+VUE前后端分离demo,后端 Spring Boot 技术和前端 Vue 技术来简单开发一个增删改查demo,该demo以简单、方便理解的方式来记录前后端结合使用的过程,方便正式开发复杂项目时能提前整体理解流程
  • 作者:Joker需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有 SpringBoot,lombok,SpringData JPA,Swagger, 跨域,前端有 Vue 和 axios 不了解这些技术的可以去入门一下 lombok 入门 swagger 入门 Spring...
  • springboot+vue 前后端分离 整合教程额外补充 详情请查看文档资料 2020年11月12日10:25:51
  • 关于SpringBoot + Vue,这里列出一个基本的项目实例。 1.环境 使用的开发工具为IDEA,最新版本,专为开发Springboot而...基本采用前后端分离,使用是的先分离后结合的方案,开发是独立进行的,但最后打包成一个项...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,504
精华内容 1,401
关键字:

springbootvue前后端分离

vue 订阅
spring 订阅