Home 前端

</span>
    <span class="fr">
    <span class="fl" th:if="${session.user == null}">你好,请<a href="/login.html" style="color:#ff4e00;">登录</a>&nbsp;<a href="/register" style="color:#ff4e00;">免费注册</a>&nbsp;&nbsp;</span>
    <span class="fl" th:if="${session.user != null}"><a href="/user/userInfo" >欢迎回来,<span th:text="${session.user.userName}"></span></a>&nbsp;|&nbsp;<a href="/orders/list">我的订单</a>&nbsp;</span>
    <span class="fl" th:if="${session.user != null} and ${session.user.role != 0}">|&nbsp;<a href="/admin/adminIndex">后台管理&nbsp;</a></span>
    <span class="fl" th:if="${session.user != null}">|&nbsp;<a href="/admin/adminIndex">秒杀商品&nbsp;</a></span>
    <span class="fl" th:if="${session.user != null}">|&nbsp;<a href="/user/logout">注销</a></span>
</span>

注意:多条件下使用 th:if 格式为
 <span class="fl" th:if="${session.user != null} and ${session.user.role != 0}">|&nbsp;<a href="/admin/adminIndex">后台管理&nbsp;</a></span>

0 17


前端HTML JS函数传参

 

JS函数通过href 传递参数给后端

后端接收参数,注意!!!js函数传递参数的顺序必须和后端接收的顺序一样!!!否则会将productId的值赋给storeId!!!

卡在这里一天!!!注意

0 21
<img src="/images/j_car.png" th:onclick="'addCart('+${product.id}+','+${product.storeId}+','+${product.price}+')'"/>
这个img 按钮会触发一个js 函数  addCart()

目标:向addCart()传递${product.storeName}的值,经过测试,发现只要传${product.storeName} 按钮就会消失!
解决方案:采用#ID名的形式获取storeName的值 如下:

HTML:
卖家名称:<a><span id="storeName" th:text="${product.storeName}" style="color: #00b7ee"></a></span>


JS:
let storeName = $("#storeName").text();

@RequestParam注解

1、作用:

@RequestParam:将请求参数绑定到你控制器的方法参数上(是springmvc中接收普通参数的注解)

2、语法:

语法:@RequestParam(value=”参数名”,required=”true/false”,defaultValue=””)

value:参数名

required:是否包含该参数,默认为true,表示该请求路径中必须包含该参数,如果不包含就报错。

defaultValue:默认参数值,如果设置了该值,required=true将失效,自动为false,如果没有传该参数,就使用默认值

详解:https://blog.csdn.net/sswqzx/article/details/84195043

@RequestBody的使用(转载!!!好文!!!)

提示:建议一定要看后面的@RequestBody的核心逻辑源码以及六个重要结论!本文前半部分的内容都是一些基
本知识常识,可选择性跳过。

声明:本文是基于SpringBoot,进行的演示说明。

 

基础知识介绍:
@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);GET方式无请求体,所以使用@RequestBody接收数据时,前端不能使用GET方式提交数据,而是用POST方式进行提交。在后端的同一个接收方法里,@RequestBody与@RequestParam()可以同时使用,@RequestBody最多只能有一个,而@RequestParam()可以有多个。

注:一个请求,只有一个RequestBody;一个请求,可以有多个RequestParam

注:当同时使用@RequestParam()和@RequestBody时,@RequestParam()指定的参数可以是普通元素、
数组、集合、对象等等(即:当,@RequestBody 与@RequestParam()可以同时使用时,原SpringMVC接收
参数的机制不变,只不过RequestBody 接收的是请求体里面的数据;而RequestParam接收的是key-value
里面的参数,所以它会被切面进行处理从而可以用普通元素、数组、集合、对象等接收)。
即:如果参数时放在请求体中,application/json传入后台的话,那么后台要用@RequestBody才能接收到;
如果不是放在请求体中的话,那么后台接收前台传过来的参数时,要用@RequestParam来接收,或
则形参前 什么也不写也能接收。

注:如果参数前写了@RequestParam(xxx),那么前端必须有对应的xxx名字才行(不管其是否有值,当然可以通
过设置该注解的required属性来调节是否必须传),如果没有xxx名的话,那么请求会出错,报400。

注:如果参数前不写@RequestParam(xxx)的话,那么就前端可以有可以没有对应的xxx名字才行,如果有xxx名
的话,那么就会自动匹配;没有的话,请求也能正确发送。
追注:这里与feign消费服务时不同;feign消费服务时,如果参数前什么也不写,那么会被默认是
@RequestBody的。

如果后端参数是一个对象,且该参数前是以@RequestBody修饰的,那么前端传递json参数时,必须满足以下要求:

后端@RequestBody注解对应的类在将HTTP的输入流(含请求体)装配到目标类(即:@RequestBody后面的类)时,会根据json字符串中的key来匹配对应实体类的属性,如果匹配一致且json中的该key对应的值符合(或可转换为),这一条我会在下面详细分析,其他的都可简单略过,但是本文末的核心逻辑代码以及几个结论一定要看! 实体类的对应属性的类型要求时,会调用实体类的setter方法将值赋给该属性

json字符串中,如果value为””的话,后端对应属性如果是String类型的,那么接受到的就是””,如果是后端属性的类型是Integer、Double等类型,那么接收到的就是null。

json字符串中,如果value为null的话,后端对应收到的就是null。

如果某个参数没有value的话,在传json字符串给后端时,要么干脆就不把该字段写到json字符串中;要么写value时, 必须有值,null 或””都行千万不能有类似”stature”:,这样的写法,如:

注:关于@RequestParam()的用法,这里就不再一一说明了,可详见 《程序员成长笔记(一)》中的相关章节。

 

示例详细说明:

先给出两个等下要用到的实体类

User实体类:

 

Team实体类:

@RequestBody直接以String接收前端传过来的json数据:

后端对应的Controller:

使用PostMan测试:

@RequestBody以简单对象接收前端传过来的json数据:

后端对应的Controller:

使用PostMan测试:

@RequestBody以复杂对象接收前端传过来的json数据:

后端对应的Controller:

使用PostMan测试:

 

@RequestBody与简单的@RequestParam()同时使用:

后端对应的Controller:

使用PostMan测试:

@RequestBody与复杂的@RequestParam()同时使用:

后端对应的Controller:

使用PostMan测试:

 

@RequestBody接收请求体中的json数据;不加注解接收URL中的数据并组装为对象:

后端对应的Controller:

使用PostMan测试:

注:如果在后端方法参数前,指定了@RequestParam()的话,那么前端必须要有对应字段才行(当然可以通过设置
该注解的required属性来调节是否必须传),否者会报错;如果参数前没有任何该注解,那么前端可以传,也可
以不传,如:

上图中,如果我们传参中没有指定token,那么请求能正常进去,但是token为null;如果在String token前指定了@RequestParam(“token”),那么前端必须要有token这个键时,请求才能正常进去,否者报400错误。

https://blog.csdn.net/justry_deng/article/details/80972817/

 

@PathVariable是spring3.0的一个新功能:接收请求路径中占位符的值

https://blog.csdn.net/sswqzx/article/details/84194979

 

 

 

 

 

 

0 15

目的:调用后端逻辑成功后,得到返回信息

采用success 函数 接收的 msg 就是后端返回的 JSON 对象

由于返回的是 JSON 对象,因此需要 JSON.stringify() 转换为JSON 字符串

 

后端代码:

 

 

前辈实例:

0 18

尝试了很多方法,比如通过后端跳转 ,失败了

通过ajax异步传递数据,可以把数据传递给后端,但是无法跳转页面,所以失败

 

后端可以拿到数据,却无法弹窗

 

改变策略,从layer.open的success 传递

0 12
layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table;

    table.render({
        elem: '#currentTableId',
        url: '/admin/fansMsg',接口地址
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        cols: [[ 对应字段渲染
            {type: "checkbox", width: 50},
            {field: 'id', width: 80, title: 'ID', sort: true},
            {field: 'userName', width: 80, title: '用户名'},
            {field: 'gender', width: 80, title: '性别', sort: true},
            {field: 'email', width: 200, title: '邮箱'},
            {field: 'score', width: 80, title: '评分', sort: true},
            {field: 'classify', width: 80, title: '职业'},
            {field: 'wealth', width: 135, title: '财富', sort: true},
            {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        page: true,
        skin: 'line'
    });

后端:
/**
 * 获取粉丝信息
 */
@GetMapping("/fansMsg")
@ResponseBody
public JSONObject showFansMsg(){

    JSONObject result = new JSONObject();
    // 店铺粉丝列表
    QueryWrapper wrapper = new QueryWrapper();
    wrapper.eq("sub_storeid",1);
    List fanslist = userService.list(wrapper);
    result.put("code", "0");
    result.put("msg", "操作成功!");
    result.put("data", fanslist);
    return result;
}

总结:后端接口获取数据库数据,将数据转化为json格式,再返回json格式!前端通过ajax的url调用后端接口得到数据,通过 cols: [[ 对应字段渲染 进行字段渲染!!!

0 16

复制代码 代码如下:
//用户名非空验证
function checkUserName(){
var name = document.myform.txtUser; //在这里我认为: name 代表的name 为 txtUser 的文本框
if(name.value.length==0){
alert(“请输入用户名”);
name.focus();
return false;
}else{return true;}
}
//密码非空验证+确认验证
function checkPass(){
var pass=document.myform.txtPass;
var rpass=document.myform.txtRPass;
if(pass.value==””){
alert(“密码不能为空”);
pass.focus();
return false;
}else if (pass.value.length<4 || pass.value.length>16){
alert(“密码的长度必须在4-16个字符”);
pass.select();
return false;
}else if(rpass.value!=pass.value){
alert(“确认密码与密码输入不一致”);
rpass.select();
return false;
}else{return true;}
}

先附上上传工具类源码:

package com.southwind.mmall002.controller.file;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

/**
* @Description
* @Author sgl
* @Date 2018-05-15 14:04
*/
@Controller
public class UploadController {
private static final Logger LOGGER = LoggerFactory.getLogger(UploadController.class);

@GetMapping(“/upload”)
public String upload() {
return “upload”;
}

@PostMapping(“/upload”)
@ResponseBody
public String upload(@RequestParam(“file”) MultipartFile file) {
if (file.isEmpty()) {
return “上传失败,请选择文件”;
}

String fileName = file.getOriginalFilename();
//此处必须填写绝对路径!!!
String filePath = “C:\\Users\\橙汁\\Desktop\\mmall09.1 -5.14.03\\src\\main\\resources\\static\\images\\”;
File dest = new File(filePath + fileName);
try {
file.transferTo(dest);
LOGGER.info(“上传成功”);
return “上传成功”;
} catch (IOException e) {
LOGGER.error(e.toString(), e);
}
return “上传失败!”;
}

}

注意点:

yml文件中配置文件上传的大小
上传工具类必须写绝对路径!!!

 

 

——————-5.15更新——————

设置绝对路径之后第二天重启项目还是找不到路径

原因是项目更改了名称,绝对路径也要跟着更改,另外C:\\Users\\橙汁\\Desktop\\mmall09.1 -5.14.03\\src\\main\\resources\\static\\images\\ 

最后的\\不要掉!!!

0 14

在页面的js中加入

代码:

layui.use('form', function(){  //此段代码必不可少
    var form = layui.form;
    form.render();
});

同时也要引入layui.js