创新实训【19】——管理员链接管理

主要内容

这篇主要记录了管理员对链接的管理，管理员可以查看链接信息，这些链接是爬取有关山东大学信息的网页，有百度，央视网，网易新闻和贴吧，管理员可以增加链接和删除链接。

展示内容

展示所有的链接

点击链接可以跳到具体的爬取页面

添加链接

删除链接

主要步骤

1.前端展示链接，主要是一个输入框，输入添加的链接，用表格展示链接信息，点击链接可以跳到按个网页，点击链接后面的删除可以删除这个链接。

<template>
  <div >
     
    
    <el-row :gutter="10">
          <!-- 搜索添加 -->
           <el-col :span="10">
             <el-input placeholder="添加链接" v-model="url" clearable  >

             </el-input>
          </el-col>
          
        <el-col :span="1">
            <el-button plain @click="tianjiaurl">添加链接</el-button>
        </el-col>
       </el-row>
   <el-table  :data= "url_list"  stripe  style="font-size: 15px " >  
         
          <el-table-column label='链接'  width="300"  >
             <template slot-scope="props">
                <el-link :href="props.row" target="_blank">{{props.row}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label='操作'  width="300"  >
             <template slot-scope="props">
                <el-link @click="shanchu(props.row)"  target="_blank">删除</el-link>
                </template>
            </el-table-column>
    </el-table>
    
  


  </div>
</template>

2.获得链接信息
前端获得链接信息，保存在url_list中

 data() {
    return{
      url_list:[],
      url:"",
    }
  },

 async geturl(){
            const {data:res}= await this.$http.post("geturl");
            this.url_list=res.url_list;
            console.log(this.url_list);
           
       },

后端从数据库中获得链接

@RequestMapping("/geturl")
    public String geturl()
    {
        List<String> url_list=urldao.geturl();
        System.out.println(url_list);
        HashMap<String,Object> res=new HashMap();
        res.put("url_list",url_list);
        String res_json= JSON.toJSONString(res);

        return res_json;
    }

数据库中获得链接信息

<select id="geturl" resultType="java.lang.String">
        select *
        from url
</select>

3.添加链接信息
前端添加连接信息

async tianjiaurl(){
      const order_query={};
             order_query.url=this.url;
             const {data:res}= await this.$http.post("tianjiaurl",order_query);
             console.log(res);
             if(res=="false")
               { 
                      this.$message.warning("添加失败，请重试！");
                this.geturl();
              }else if(res=="ok")
               {
                 this.$message.success("添加成功！！！");
                 this.geturl();
              }
    } 

后端将链接增加到数据库

@RequestMapping("/tianjiaurl")
    public String tianjiaurl(@RequestBody String data )
    {
        JSONObject datajson= JSONObject.parseObject(data);
        System.out.println(datajson);
        String url=datajson.getString("url");

        int  f=urldao.tianjiaurl(url);
        String flag="ok";
        if(f==0)
            flag="false";

        return flag;
    }

数据库中插入信息

<insert id="tianjiaurl" >
        insert into url(url)
        values (#{url})
    </insert>

4.删除链接信息
前端删除链接信息，先显示提示框，是否要删除，如果删除，就将这个url传给后端，根据后端的结果，显示是否删除成功。

async shanchu(url){
      this.$confirm('确定要删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
            
            const order_query={};
             order_query.url=url;
             const {data:res}= await this.$http.post("shanchuurl",order_query);

             if(res=="false")
               { 
                      this.$message.warning("删除失败，请重试！");
                this.geturl();
              }else if(res=="ok")
               {
                 this.$message.success("删除成功！！！");
                 this.geturl();
              }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    }, 

后端删除链接，并返回是否删除成功。

@RequestMapping("/shanchuurl")
    public String shanchuurl(@RequestBody String data )
    {
        JSONObject datajson= JSONObject.parseObject(data);
        System.out.println(datajson);
        String url=datajson.getString("url");

        int  f=urldao.shanchuurl(url);
        String flag="ok";
       if(f==0)
           flag="false";

        return flag;
    }

数据库中删除这个链接

<delete id="shanchuurl" >
        delete from url
        where url=#{url}
</delete>