JS 字符串方法--------提取部分字符串
- 有三种提取部分字符串的方法:
- slice(start, end)
- slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
- 该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。
- 如果某个参数为负,则从字符串的结尾开始计数。
- 如果省略第二个参数,则该方法将裁剪字符串的剩余部分:
- substring(start, end)
- substring() 无法接受负的索引。和slice()方法相似
- 如果省略第二个参数,则该 substring() 将裁剪字符串的剩余部分。
- substr(start, length)
- 该方法设置两个参数:起始索引(开始位置),规定被提取部分的长度。
- 如果省略第二个参数,则该 substr() 将裁剪字符串的剩余部分。
- 如果首个参数为负,则从字符串的结尾计算位置,第二个参数不能为负
(https://www.w3school.com.cn/js/js_string_methods.asp)
异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
出现这个异常说明了跳转页面的url无对应的值.
原因1:
-
Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包
-
spring-boot会自动加载启动类所在包下及其子包下的所有组件
原因2:
在springboot的配置文件:application.yml或application.properties中关于视图解析器的配置问题:
- 当pom文件下的spring-boot-starter-paren版本高时使用:spring.mvc.view.prefix/spring.mvc.view.suffix
- 当pom文件下的spring-boot-starter-paren版本低时使用::spring.view.prefix/spring.view.suffix
原因3:
控制器的URL路径书写问题:
@RequestMapping(“xxxxxxxxxxxxxx”) ,实际访问的路径与”xxx”不符合
(https://blog.csdn.net/liupeifeng3514/article/details/79525347)
对表的查询
service
//查询所有
public List<User> selectAll() {
List<User> ulist=new ArrayList();//多态
try {
Connection conn=jdbc.getconnection();
Statement st=conn.createStatement();
String sql="select * from user";
System.out.println("sql--->"+sql);
ResultSet rss=st.executeQuery(sql);
//rss.next()只要 结果集合里,至少有一条记录,next方法就会返回true
while (rss.next()) {
User user=new User();//每条记录都是一个新的对象
user.setId(rss.getString("id"));
user.setName(rss.getString("name"));
user.setPwd(rss.getString("pwd"));
user.setType(rss.getString("type"));
ulist.add(user);
}
//从下往上关
rss.close();
st.close();
conn.close();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return ulist;
}
controller
@RequestMapping("all")//拦截路径
public List<User> getAll(){
UserService us=new UserService();
List<User> userlist=us.selectAll();
return userlist;
}
- springboot不需要转json本身就有
js
$(document).ready(function(){
$.getJSON("all", function(json){//异步
console.log(json);//打印---数组
$("#tbodymainbtn").empty();//清除
for(var i=0;i<json.length;i++){//没有类型 都用var
$("#tbodymainbtn").append(//找到tbody
"<tr id='tridval"+i+"'>"
+"<td>"+ json[i].name
+"</td>"
+"<td>"+ json[i].pwd
+"</td>"
+"<td>"+ json[i].id
+"</td></tr>"
);
});
});
效果:
对表的删除
service
//根据id删除
public boolean deleteById(String id) {
boolean flag=false;
try {
Connection conn=jdbc.getconnection();
String sql="delete from user where id=?";
PreparedStatement st=conn.prepareStatement(sql);
st.setString(1, id);
if( st.executeUpdate()>0) {
flag=true;
}
st.close();
conn.close();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return flag;
}
controller
@RequestMapping("delete")
public Map Remove(HttpServletRequest request){
UserService us=new UserService();
String id=request.getParameter("uid");
boolean rs=us.deleteById(id);
Map map=new HashMap();//基本类型就要用map包一下
map.put("result", rs);
return map;
}
- 通过 HttpServletRequest request 向前端取值
js
$(document).ready(function(){
$.getJSON("all", function(json){//异步
console.log(json);//打印---数组
$("#tbodymainbtn").empty();//清除
for(var i=0;i<json.length;i++){//没有类型 都用var
$("#tbodymainbtn").append(//找到tbody
"<tr id='tridval"+i+"'>"
+"<td>"+ json[i].name
+"</td>"
+"<td>"+ json[i].pwd
+"</td>"
+"<td>"+ json[i].id
+"</td>"
+"<td><button type='button' class='btn btn-outline-info btn-sm' id='btn1"+i+"' name='btn001'>修改</button>"
+"   <button type='button' class='btn btn-outline-danger btn-sm' id='btn3"+json[i].id+"' name='btn003'>删除</button>"
+"</td></tr>"
);
$("button[name='btn003']").click(function(){
var id=this.id;
//截取剩余
var numb=id.slice(4);
console.log("***********"+id);
$.getJSON("delete",{uid:numb}, function(json){
console.log("*****uid******"+numb,json);
window.location.href="table.html";
});
});
});
});
对表的修改
service
//修改
public boolean updatById(User user) {
boolean flag=false;
try {
Connection conn=jdbc.getconnection();
String sql="update user set name=?,pwd=? where id=?";
PreparedStatement st=conn.prepareStatement(sql);
st.setString(1, user.getName());
st.setString(2, user.getPwd());
st.setString(3, user.getId());
if( st.executeUpdate()>0) {
flag=true;
}
st.close();
conn.close();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return flag;
}
controller
@RequestMapping("updateu")
public Map UpdateUser(HttpServletRequest request){
UserService us=new UserService();
User u=new User();
String id=request.getParameter("uid");
String name=request.getParameter("uname");
String pwd=request.getParameter("upwd");
u.setId(id);
u.setName(name);
u.setPwd(pwd);
boolean rs=us.updatById(u);
Map map=new HashMap();//基本类型就要用map包一下
map.put("result", rs);
return map;
}
js
$(document).ready(function(){
$.getJSON("all", function(json){//异步
console.log(json);//打印---数组
$("#tbodymainbtn").empty();//清除
for(var i=0;i<json.length;i++){//没有类型 都用var
$("#tbodymainbtn").append(//找到tbody
"<tr id='tridval"+i+"'>"
+"<td>"+ json[i].name
+"</td>"
+"<td>"+ json[i].pwd
+"</td>"
+"<td>"+ json[i].id
+"</td>"
+"<td><button type='button' class='btn btn-outline-info btn-sm' id='btn1"+i+"' name='btn001'>修改</button>"
+"</td></tr>"
);
$("#tbodymainbtn").append(//找到tbody
"<tr style='display:none' id='tridval2"+i+"'><form>"
+"<td><input type='text' id='name2"+json[i].id+"' value='"+ json[i].name
+"'/></td>"
+"<td><input type='text' id='pwd2"+json[i].id+"' value='"+ json[i].pwd
+"'/></td>"
+"<td>"+ json[i].id
+"</td>"
+"<td><button type='button' class='btn btn-outline-primary btn-sm' id='btn2"+json[i].id+"'name='btn002'>保存</button>"
+"</td></form></tr>"
);
}
$("button[name='btn001']").click(function(){
var id=this.id;
var numb=id.slice(4);
console.log("***********"+id);
console.log("***********"+numb);
$("#tridval"+numb).hide();
$("#tridval2"+numb).show();
});
$("button[name='btn002']").click(function(){
var id=this.id;
var numb=id.slice(4);
console.log("***********"+id);
var nval=$("#name2"+numb).val();
var pval=$("#pwd2"+numb).val();
console.log("*****name2******"+nval);
console.log("*****pwd2******"+pval);
$.getJSON("updateu",{uid:numb,uname:nval,upwd:pval}, function(json){
console.log("*****updateu******"+numb+" "+nval+" "+pval,json);
window.location.href="table.html";
});
$("#tridval"+numb).show();
$("#tridval2"+numb).hide();
});
});
});