前端（vue.js, SpringBoot+thymeleaf,在html页面获取session）

PSW_18722821243

已于 2024-05-13 15:33:03 修改

阅读量1.6k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-03-28 20:53:19 首次发布

本文链接：https://blog.csdn.net/psw_18722821243/article/details/129824814

版权

1、若依小程序加后台
https://gitee.com/rahman/AbuCoder-RuoYi-Vue-uniapp-wx
https://gitee.com/rahman/abu-coder-ruoyi-uniapp-wx

2、vue 关于缓存
vue 存缓存
window.localStorage.setItem(‘admin’, JSON.stringify(ret.admin))
vue 获取缓存
var t = window.localStorage.getItem(“admin”);

SpringBoot+thymeleaf,在html页面获取session
https://blog.csdn.net/weixin_40550726/article/details/82626886?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_utm_term~default-0-82626886-blog-123579215.235^v38pc_relevant_anti_t3_base&spm=1001.2101.3001.4242.1&utm_relevant_index=3
1、html获取后台session值（vue）

<script th:inline="javascript">
            var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
            var userid = [[${session.userid}]];
            var role = [[${session.role}]];
        </script>

2、vue 相关https://gitee.com/tqz521127/music-website-player?_from=gitee_search

vue执行，切换到对应的目录后
npm install（安装运行环境）已安装的话不需要安装了
npm run dev（运行）

有错误话执行我们应该执行npm run serve，或者把serve改成dev，执行 npm run dev
https://blog.csdn.net/weixin_44433499/article/details/115225747

3、vue html js引用可以跳转到对应的js

<script type="text/javascript" th:src="@{/static/js/userInfo/info.js}"></script>

4、前端获取session值

后端：设置session  session.setAttribute("role",login1.getRoleid());
js
 <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
        var userid = [[${session.userid}]];
    </script>
html
  <div th:if="${session.userid!=null}" style="line-height:40px"></div>

在这里插入图片描述
5 vue vm 多实体嵌套前台获取值

  （1）后台
   public class Registration {

    private Guardian guardian;
    private Student student;
    private Enroll enroll;
    private List<Otherdata> otherdata;
    private School school;
}
   (2)
   ![js 代码](https://img-blog.csdnimg.cn/50d3a0f40e9b4d06a37f413996b11ad2.jpeg)
var vm = new Vue({
	el:'#app',
	data:{
		q:{
			annouTitle: '',
		},
		showList: true,
		title: null,
		dataInfo:{
			 enrollId:0,
			 backupField1:"",
			 guardian:{},
			 student:{},
			 otherdata:[],
			 school:{},
			enroll:{}
		},
	},
  （3）页面
  <div class="form-group">
	<div class="col-sm-2 control-label"><label style="color:red;">&nbsp*</label>学生姓名</div>
		<div class="col-sm-7">
			<input type="text"  class="form-control required=required" name="stuName" v-model="dataInfo.student.stuName"  placeholder="学生姓名" required />
		</div>
   </div>