效果如下
实现效果：
（1、能够显示分类信息
（2、能够编辑新闻名称同时完成修改
（3、能够添加分类并且上传数据库
1、后台代码
1 @admin_blue.route('/news_type',methods=['GET','POST']) 2 def news_type_dis(): 3 categories = None 4 try: 5 #查询所有得分类 6 categories = Category.query.all() 7 except Exception as e: 8 current_app.logger.error(e) 9 10 #处理post请求 11 if request.method == "POST": 12 #接收参数 13 name = request.json.get("name") 14 ca_id = request.json.get("id") 15 #判断是否接收到name值 16 if not name: 17 return jsonify(errno=RET.DBERR, errmsg="参数不全") 18 19 #判断是否有id值，做双分支 20 if ca_id: 21 #有id值时 22 try: 23 #查询分类id和接收到得分类id一样得分类 24 ca_name = Category.query.filter(Category.id == ca_id).first() 25 except Exception as e: 26 current_app.logger.error(e) 27 return jsonify(errno=RET.DBERR, errmsg="数据库查询失败") 28 #赋值 29 ca_name.name = name 30 #当id没有值时 31 else: 32 try: 33 #实例化分类模型类 34 name_add = Category() 35 #赋值 36 name_add.name = name 37 except Exception as e: 38 current_app.logger.error(e) 39 return jsonify(errno=RET.DBERR, errmsg="数据库查询失败") 40 try: 41 #逻辑添加，数据上传 42 db.session.add(name_add) 43 db.session.commit() 44 except Exception as e: 45 current_app.logger.error() 46 db.session.rollback() 47 return jsonify(errno=RET.DATAERR, errmsg="数据库上传失败") 48 #返回结果 49 return jsonify(errno=RET.OK, errmsg="修改完成") 50 #传递上下文 51 context = { 52 "categories": categories, 53 } 54 return render_template("admin/news_type.html",context = context)
2、前端代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>新经资讯后台管理</title> 6 <link rel="stylesheet" type="text/css" href="../../static/admin/css/reset.css"> 7 <link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css"> 8 <script type="text/javascript" src="../../static/admin/js/jquery-1.12.4.min.js"></script> 9 <script type="text/javascript" src="../../static/admin/js/news_type.js"></script> 10 </head> 11 <body> 12 <div class="breadcrub"> 13 当前位置：新闻管理>新闻分类管理 14 </div> 15 <div class="pannel"> 16 <table class="common_table"> 17 <tr> 18 <th width="10%">id</th> 19 <th width="80%">类别名称</th> 20 <th width="10%">管理操作</th> 21 </tr> 22 23 {% for category in context.categories %} 24 <tr> 25 <td>{{ category.id }}</td> 26 <td>{{ category.name }}</td> 27 <td><a href="javascript:;" class="edit">编辑</a></td> 28 </tr> 29 {% endfor %} 30 31 <tr> 32 <td colspan="3"><a href="javascript:;" class="addtype">增加分类</a></td> 33 </tr> 34 </table> 35 </div> 36 37 <div class="pop_con"> 38 <div class="pop"> 39 <form> 40 <h3>修改分类</h3> 41 <div class="form_group mt50"> 42 <label class="input_label">分类名称：</label><input type="text" class="input_txt3"> 43 <span class="error_tip">提示文字</span> 44 </div> 45 <div class="form_group line_top"> 46 <input type="button" value="确定" class="confirm"> 47 <input type="button" value="取消" class="cancel"> 48 </div> 49 </form> 50 </div> 51 <div class="mask"></div> 52 </div> 53 </body> 54 </html>
3、js代码
1 function getCookie(name) { 2 var r = document.cookie.match("\b" + name + "=([^;]*)\b"); 3 return r ? r[1] : undefined; 4 } 5 6 $(function(){ 7 var $a = $('.edit'); 8 var $add = $('.addtype'); 9 var $pop = $('.pop_con'); 10 var $cancel = $('.cancel'); 11 var $confirm = $('.confirm'); 12 var $error = $('.error_tip'); 13 var $input = $('.input_txt3'); 14 var sHandler = 'edit'; 15 var sId = 0; 16 17 $a.click(function(){ 18 sHandler = 'edit'; 19 sId = $(this).parent().siblings().eq(0).html(); 20 $pop.find('h3').html('修改分类'); 21 $pop.find('.input_txt3').val($(this).parent().prev().html()); 22 $pop.show(); 23 }); 24 25 $add.click(function(){ 26 sHandler = 'add'; 27 $pop.find('h3').html('新增分类'); 28 $input.val(''); 29 $pop.show(); 30 }); 31 32 $cancel.click(function(){ 33 $pop.hide(); 34 $error.hide(); 35 }); 36 37 $input.click(function(){ 38 $error.hide(); 39 }); 40 41 $confirm.click(function(){ 42 43 var params = {} 44 if(sHandler=='edit') 45 { 46 var sVal = $input.val(); 47 if(sVal=='') 48 { 49 $error.html('输入框不能为空').show(); 50 return; 51 } 52 params = { 53 "id": sId, 54 "name": sVal, 55 }; 56 } 57 else 58 { 59 var sVal = $input.val(); 60 if(sVal=='') 61 { 62 $error.html('输入框不能为空').show(); 63 return; 64 } 65 params = { 66 "name": sVal, 67 } 68 } 69 70 // TODO 发起修改分类请求 71 $.ajax({ 72 url:"/admin/news_type", 73 method: "post", 74 headers: { 75 "X-CSRFToken": getCookie("csrf_token") 76 }, 77 data: JSON.stringify(params), 78 contentType: "application/json", 79 success: function (resp) { 80 if (resp.errno == "0") { 81 // 刷新当前界面 82 location.reload(); 83 }else { 84 $error.html(resp.errmsg).show(); 85 } 86 } 87 }) 88 }) 89 })