博學谷項目總結,我的總結經驗

1.用的的技術javascript

require.js  是用來模塊化開發,進行異步請求的
arttemplate.js 模板引擎是用來數據渲染的
jquery.js  是用來進行DOM操做和數據請求的
jquery.cookie.js 是用來儲存cookie的值得
bootstrap   它依賴有jquery,若是須要bootstrap.js前面須要引入jquery.js
bootstrap.css  是用來進行樣式設置的
bootstrap.js    是用來動態交互的

2.login.html部分用到的技術css

   使用jquery的設置cookie的值  $.cookie("userInfo", JSON.stringify(res.result));    $.removeCookie("userInfo")刪除cookie值    須要下載jquery.cookie.jshtml

   頁面調轉   location.href = "/"; //location.href="index.html"前端

   阻止默認行爲  return false(jquery下才能夠)  java

   點擊獲取form的表單信息 觸發 submit 事件,在用serialize()獲取表單信息 $(this).serialize() jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="css/login.css">
</head>
<body>
  <div class="login-container">
    <h3 class="text-center">博學谷後臺管理系統</h3>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">用戶名</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" placeholder="" name="tc_name" value="前端學院">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">密碼</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" placeholder="" name="tc_pass" value="123456">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-success btn-block btn-lg">登陸</button>
        </div>
      </div>
    </form>
  </div>
</body>
<script src="js/lib/jquery-2.1.4.js"></script>
<script src="js/lib/jquery.cookie.js"></script>
<script>
  $("form").on("submit", function () {
    //一、獲取輸入的表單信息
    var formData = $(this).serialize();
    console.log(formData)
    //二、提交到服務器
    $.ajax({
      type: "post",
      url: "/api/login",
      data: formData,
      success: function (res) { //響應的:response
        //爲了實現login.html裏面的數據能夠再index.html裏面進行訪問:
        //a、h5本地存儲:localStorage/sessionStorage
        //b、cookie:瀏覽器端的技術,也能夠實現:在不跨域的前提下,任何頁面均可以訪問這些數據
        console.log(res);
        $.cookie("userInfo", JSON.stringify(res.result));

        //c、session:服務器端的技術

        var userInfoStr = $.cookie("userInfo");
        console.log(userInfoStr); //JSON字符換
         location.href = "/"; //location.href="index.html"
      }
    })
    //出發點:減小服務器的壓力,將服務器驗證變成前端驗證
    // -->前端驗證須要獲取數據,須要在用戶提交表單的時候,才能真正的獲取數據,而用戶用戶提交表單就會觸發form標籤的submit事件,
    而submit事件的就會默認跳轉頁面(刷新頁面),而一旦跳轉頁面數據就丟失了,因此須要阻止該事件的默認行爲 //阻止事件的默認行爲-->同步提交表單 return false; }) </script> </html>

2.  index.html  部分用到的技術點web

  使用bootstrap進行首頁佈局 引入相應的css和jsajax

  引入require.js並與main.js創建聯繫 data-main裏面的「.js」能夠省略 編程

  <script src="js/lib/require.js" data-main="main"></script>bootstrap

  給一個空盒子設置一個div來放切換的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="assets/datetimepicker/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="assets/uploadify/uploadify.css"/>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--側邊欄-->
<div class="aside">
    <!--我的資料-->
    <div class="profile-container">
        <div class="img-container">
            <img src="" class="img-circle img-responsive">
        </div>
        <h4 class="text-center"></h4>
    </div>
    <!--菜單欄-->
    <div class="list-group">
        <button type="button" class="list-group-item active btn-teacher">講師管理</button>
        <button type="button" class="list-group-item btn-course">課程管理</button>
        <button type="button" class="list-group-item btn-courseAdd">>>>建立課程</button>
        <button type="button" class="list-group-item btn-course-message">>>>課程基本信息</button>
        <button type="button" class="list-group-item btn-course-time">>>>編輯課時</button>
        <button type="button" class="list-group-item btn-course-category">課程分類</button>
        <button type="button" class="list-group-item btn-chart">圖表統計</button>
    </div>
</div>
<!--右側內容區-->
<div class="content-container">
    <!--頂部菜單欄-->
    <div class="top panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-1">
                    <button type="button" class="btn btn-success" aria-label="Left Align">
                        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                    </button>
                </div>
                <div class="col-md-1 col-md-offset-8">
                    <a href="#" class="personalCenter">我的中心</a>
                </div>
                <div class="col-md-1">
                    <a href="login.html" class="link-logout">退出</a>
                </div>
            </div>

        </div>
    </div>

    <!--要切換內容的區域-->
    <div class="menu-content-container">

    </div>
</div>
</body>
<script src="js/lib/require.js" data-main="main"></script>
</html>

3.  main.js  部分用到的技術點,它就是個主模塊,是個大心臟,子模塊都會引入到這裏 

  require的配置問題 使用require.config({})來進行配置

  baseUrl    鍵值對    來設置默認路徑   baseUrl:"js"

  paths    鍵值對對象    來設置路徑     paths:{jquery:"lib/jquery-2.1.4",cookie:"lib/jquery.cookie"}

  shim   鍵值對對象來  來設置模塊依賴    shim:{bootstrap:{deps:["jquery"] }}

  require(["a.js","b.js"],function(a,b){...})

  當他觸發默認事件的時候觸發a.js也就是  $(this).a("我是石順麟") 會跟a.js創建聯繫並把"我是石順麟"經過形參傳過去了

  a.js 子模塊須要設置按需加載的問題  並用define(["c.js","d.js"],function(){ return function(name){處理業務邏輯name="我是石順麟"} })

  設置ajax的全局默認樣式 jquery的方法 $.ajaxSetup(beforeSend:function(){發送ajax等待的業務邏輯},complete:function(){數據請求回來以後的業務邏輯})

  把JSON字符換轉化成JSON對象  JSON.parse(userInfoStr)

  實現菜單欄切換功能 經過事件委託爲按鈕註冊事件判斷該類名是哪一個 用HTML5的 hasclass("demo")方法

  自動觸發事件  $(".aside .list-group button.btn-teacher").trigger("click");  trigger()方法

  退出功能 刪除cookie值 $.removeCookie("userInfo") 並調轉到登陸頁面 location.href="login.html"

/**
 * 這是註釋的內容
 * Author:Wilbert
 */

require.config({
    baseUrl:"js",//設置默認路徑
    paths:{  //設置路徑
        jquery:"lib/jquery-2.1.4",
        cookie:"lib/jquery.cookie",
        text:"lib/text",
        arttemplate:"lib/template-web",

        //配置tpls文件夾路徑
        tpls:"../tpls",

        bootstrap:"../assets/bootstrap/js/bootstrap",
        datatime:"../assets/datetimepicker/js/bootstrap-datetimepicker",
        //上傳控件
        upload:"../assets/uploadify/jquery.uploadify",

        //配置ueditor
        ueConf:"../assets/ueditor/ueditor.config",
        ueAll:"../assets/ueditor/ueditor.all",
        ZeroClipboard:"../assets/ueditor/third-party/zeroclipboard/ZeroClipboard",

        //配置百度圖表控件
        echarts:"lib/echarts.min"
    },
    shim:{ //設置依賴模塊
        bootstrap:{
            deps:["jquery"] //依賴jQuery
        },
        datatime:{
            deps:["bootstrap"] //依賴bootstrap
        },
        upload:{
            deps:["jquery"]
        }

    }
})

require(["jquery","teacher/list","courseCategory/list","course/list","course/add","course/editMessage","couserTime/list","course/personalCenter","text!tpls/loading.html","char","cookie"],
function($,teacherList,courseCategory,courseList,courseAdd,editMessage,coursetime,personalCenter,loadingTpl,chart){ var $modalloading = $(loadingTpl) //設置ajax請求的全局默認樣式,全部的ajax請求均可以用的 $.ajaxSetup( { beforeSend:function(){ //console.log("發送ajax以前"); //再每次發送ajax以前把前面的模態框刪除掉 //$("#modalloading").remove(); $modalloading.appendTo("body").modal(); }, complete:function(){ $modalloading.on("hidden.bs.modal",function(){ $modalloading.remove(); }).modal("hide"); } }) //1在cookie中獲取保存的數據 var userInfoStr=$.cookie("userInfo"); //console.log(userInfoStr); //JSON字符換 //若是獲取不到cookie,說明沒有登陸過,跳轉到登陸頁面 if(!userInfoStr){ location.href="login.html"; } var userInfo=JSON.parse(userInfoStr); //把JSON字符換轉化成JSON對象 //console.log(userInfo); //二、更新用戶名和頭像 $(".profile-container .img-container img").attr("src",userInfo.tc_avatar); $(".profile-container h4").text(userInfo.tc_name); //三、實現菜單欄切換 $(".aside .list-group").on("click","button",function(){ //實現菜單背景的切換 $(this).addClass("active").siblings().removeClass("active"); //a、講師管理 if($(this).hasClass("btn-teacher")){ teacherList(); }else if($(this).hasClass("btn-course")){ //b、課程管理 courseList(); }else if($(this).hasClass("btn-course-category")){ //b、課程分類 courseCategory(); }else if($(this).hasClass("btn-chart")){ //alert("圖表統計模塊") //b、圖表統計 chart(); }else if($(this).hasClass("btn-courseAdd")){ //b、建立課程 courseAdd(); }else if($(this).hasClass("btn-course-message")){ //b、課程基本信息 editMessage(); }else if($(this).hasClass("btn-course-time")){ //b、課時管理 coursetime(); } }); //5.觸發我的中心事件 $(".panel-body .personalCenter").on("click",function(){ personalCenter(); }) //6.爲退出註冊事件 $(".link-logout").on("click",function(){ //發送ajax請求 使其到登陸狀態 $.post("api/logout",{},function(){ //刪除cookie的值 $.removeCookie("userInfo") console.log($.cookie("userInfo")); //調轉到登陸界面 //location.href="login.html"; }) }) //四、自動觸發講師管理按鈕的點擊事件 $(".aside .list-group button.btn-teacher").trigger("click"); })

4.講師管理模塊 teacher/list.js,所用到的技術

  text.js  用於異步加載文本資源如txt、css、html、xml、svg等。

    首先須要在主模塊中配置text.js,其次在相應模塊引入html文件

  發送get請求  $.get("api",{},function(res){這裏處理業務邏輯})

  發送post請求  $.post("api",{},function(res){處理業務邏輯})

  報錯功能  throw new Error("數據請求錯誤")

  調用arttemplate的render()方法   art.render("html字符串",res返回來的數據)

    把字符串html追加到一個盒子當中使用append()方法前提是使用empty()來清空盒子內容,$("#id").empty().append($teacherList)

  鏈式編程直接在後面 "."就能夠了 

  啓用和註銷按鈕模塊沒有html渲染直接放在了講師管理模塊

    點擊註銷按鈕獲取相應的ID值併發送ajax請求,獲取更新後的狀態值再來改變註銷按鈕的的值用text("")方法

/**
 * 講師主模塊-->講師列表
 * Author:Wilbert
 */
define(["jquery", "text!tpls/teacherList.html", "arttemplate", "teacher/showInfo","teacher/add","teacher/edit"], function ($, teacherListTpl, art, teacherShowInfo,teacherAdd,teacherEdit) {
    //art接受了arttemplate模板引擎的返回值-->全局函數:template
return function () { //3個參數:url/參數/success方法的回調函數 $.get("/api/teacher", {}, function (res) { //優化前: // if(res.code==200){ // //數據正常返回-->數據加載到表格中 // }else { // //數據發生了異常 // throw new Error(res.msg); // } //優化後: if (res.code != 200) throw new Error(res.msg); console.log(res); //----->代碼可以執行到這裏,數據必定成功返回 var teacherList = art.render(teacherListTpl, res); //teacherList:"<div></div>" //console.log(teacherList); var $teacherList = $(teacherList); //console.log($teacherList); $teacherList //調用講師增長模塊 .on("click",".btn-add-teacher",function(){ teacherAdd(); }) //啓動註銷模塊 .on("click", ".btn-status", function () { //實現修改用戶狀態 //a、修改頁面中相應的文本 //b、修改服務器中保存的數據 //實現思路:b-->a var $btn = $(this); var data = { tc_id: $(this).parent().attr("tc_id"), tc_status: $(this).parent().attr("tc_status") }; $.post("/api/teacher/handle", data, function (res) { if (res.code != 200) throw new Error(res.msg); //獲取到更新後的狀態值 var tc_status = res.result.tc_status; //修改頁面中的文本 //一、修改按鈕的文本 //0表示啓用狀態 $btn.text(tc_status == 0 ? "註銷" : "啓用"); //二、修改屬性 $btn.parent().attr("tc_status", tc_status); //三、修改指定"用戶狀態列"的文本 $btn.parent().siblings(".td-status").text(tc_status == 0 ? "啓用" : "註銷"); }) }) .on("click", ".btn-show", function () { var tc_id = $(this).parent().attr("tc_id"); //實現查看講師信息 teacherShowInfo(tc_id); }) //調用編輯講師模塊 .on("click",".btn-edit",function(){ var tc_id = $(this).parent().attr("tc_id") // console.log(tc_id); teacherEdit(tc_id); }); //$("<div></div>").appendTo("body"); //-->將字符串轉換爲dom元素,把該dom元素放到body中 //$(".menu-content-container").html(teacherList);//又會將字符串轉換爲另外一個dom元素,將dom元素放到頁面中 $(".menu-content-container").empty().append($teacherList); }) }; });

5.添加講師模塊 teacher/add.js  所用到的技術點

  使用了bootstrap的model()方法事件觸發模塊框會置頂,前提是先清空之前的模塊框用remove()方法,否則會建立無數個模塊框

  使用 submit事件 用jquery的serialize()方法獲取獲取表單信息對象,前提是表單須要有name屬性

  使用日期控件,首先給盒子加個類名好比data-join ,其次用find(".data-join").datetimepicker({})來初始化日期控件 

/**
 * 增長講師模塊
 */
define(["jquery", "text!tpls/teacherAdd.html", "bootstrap","datatime"], function ($, teacherAddTpl) {
  return function () {
    $("#modalAddTeacher").remove();
    // console.log(teacherAddTpl);
    var $teacherAdd = $(teacherAddTpl)
      .on("submit", "form", function () {

        var FormData = $(this).serialize();
        // console.log(FormData);

        //組織默認提交按鈕刷新真個頁面
        // $('#modalAddTeacher').modal('hide')

        // console.log(FormData);
        $.post("api//teacher/add", FormData, function (res) {
          // console.log(res);
          // 沒有發送成功就報錯
          if (res.code !== 200) throw new Error(res.msg);

          //讓模態框隱藏
          $teacherAdd.modal("hide");

          //到了這步說明提交數據成功 刷新講師模塊
          $(".aside .list-group button.btn-teacher").trigger("click");
          
        })

        return false;
      })
      .appendTo("body").modal()

      //初始化日期控件
        $teacherAdd.find(".date-join").datetimepicker({
            format: 'yyyy-mm-dd',           //格式化日期格式
            language:"zh-CN",               //選擇語言,須要引入語言包
            daysOfWeekDisabled:[1,2],        //指定周幾不能用
            autoclose:true,      //選完一個日期以後就會自動隱藏日期框
            minView:"month",
            todayBtn:true,
            todayHighlight:true     //當選擇其餘日期的時候,高亮今天的日期
        });

  }

});

6. 講師查看模塊 teacher/showInfo.js,用到的技術

  首先用形參tc_id來接口講師列表模塊傳過來的ID值

  其次用這個id發送ajax請求,來獲取相應的信息

  再用arttemplete模板引擎的render方法把數據放在html頁面中

/**
 * 查看講師信息
 * Author:Wilbert
 */
define(["jquery","text!tpls/teacherShowInfo.html","arttemplate","bootstrap"],function ($,teacherShowInfoTpl,art) {
    return function (tc_id) {

        //獲取指定講師的信息
        $.get("/api/teacher/view",{tc_id:tc_id},function(res){
            if(res.code!=200) throw new Error(res.msg);


            $("#modalTeacherInfo").remove();

            var teacherShowInfo=art.render(teacherShowInfoTpl,res.result);

            $(teacherShowInfo).appendTo("body").modal();
        });


    };
});

7.講師編輯模塊 teacher/edit.js,用到的技術

  使用形參來接收講師列表模塊list.js傳過來的ID值,

  經過ID值來發送ajax請求來獲取對應的信息

  經過arttemplate.render("模板字符串",res)方法吧獲取的數據仿造模板字符串中

  經過submit事件用jquery的 serialize()方法來獲取表單信息併發送ajax請求,請求成功後用隱藏模塊框刷新講師管理模塊功能

  使用jquery的appendTo("body")把代碼字符串放到body中並追加bootstrap的model()方法來增長模塊框方法

/**
 * 講師編輯模塊
 */
define(["jquery", "text!tpls/teacherEdit.html","arttemplate", "bootstrap", "datatime"], function ($, teacherEditTpl,art) {
  return function (tc_id) {
    console.log("講師編輯模塊")
      $.get("api//teacher/edit",{tc_id:tc_id},function(res){
        if(res.code != 200) throw new Error(res.msg);
        // console.log(res);

        //刪除之前的
        $("#modalEditTeacher").remove();

        var teacherEdit = art.render(teacherEditTpl,res.result)

        //點擊編輯模態框保存數據併發送請求刷新頁面
        var $teacherEdit = $(teacherEdit)
          .on("submit","form",function(){
            var FormData = $(this).serialize();
            console.log(FormData);

            //獲得form表單的數據 可是沒有tc_id用hidden隱藏域把它加上去
            //把獲得的數據發放修改講師 發送post請求
            $.post("api//teacher/update",FormData,function(res){
              console.log(res);
              // 判斷有沒有發送請求成功
              if(res.code !=200) throw new Error(res.msg);

              //防模態框隱藏 調用 modal("hide")方法會隱藏
              $teacherEdit.modal("hide");

              //刷新講師管理頁面 調用它的單機事件 trigger("click")
              $(".aside .list-group button.btn-teacher").trigger("click");

            })


            //異步請求防止刷新頁面
            return false;
          })
          .appendTo("body").modal();
      })

      
    //初始化日期控件
    // $teacherEdit.find(".date-join").datetimepicker({
    //   format: 'yyyy-mm-dd', //格式化日期格式
    //   language: "zh-CN", //選擇語言,須要引入語言包
    //   daysOfWeekDisabled: [1, 2], //指定周幾不能用
    //   autoclose: true, //選完一個日期以後就會自動隱藏日期框
    //   minView: "month",
    //   todayBtn: true,
    //   todayHighlight: true //當選擇其餘日期的時候,高亮今天的日期
    // });
  }
})

8.上傳控件的使用

  1.首先定義一個file標籤   <input type="file" id="picUpload">

<div class="panel panel-default">
  <div class="panel-body">
    <ol class="breadcrumb">
      <li><a href="#">課程管理</a></li>
      <li class="active">課程圖片</li>
    </ol>
    <div class="media">
      <div class="media-left">
        <a href="javascript:void(0)">

          {{if(!cs_cover)}}
          <img class="media-object" src="imgs/course.png" alt="" width="240" height="120">
          {{else}}
          <img class="media-object" src="{{cs_cover}}" alt="" width="240" height="120">
          {{/if}}

        </a>
      </div>
      <div class="media-body">
        <h4>課程名稱:{{cs_name}}</h4>
        <h4 class="media-heading">講師名稱:{{tc_name}}</h4>
        <input type="file" id="picUpload">
      </div>
    </div>


  </div>
</div>

  2.初始化上傳控件的使用

/**
 * 圖片修改模塊
 * Created by Administrator on 2017/7/6.
 */
define(["jquery","text!tpls/coursePic.html","arttemplate","bootstrap","upload"],function($,coursePicTpl,art){
  return function(cs_id){

    $.get("api/course/picture",{cs_id:cs_id},function(res){
      //console.log(res);
      var coursePic = art.render(coursePicTpl,res.result);
      var $coursePic = $(coursePic);

      $(".menu-content-container").html($coursePic);

      //初始化上傳插件
      $("#picUpload").uploadify({
        fileObjName: "cs_cover_original",    //提交到服務器的name值
        formData: {cs_id: cs_id},                 //須要提交到服務器的額外的數據
        height: 30,
        swf: '../../assets/uploadify/uploadify.swf', //必填、放一個swf文件
        uploader: '/api/uploader/cover',      //請求的地址
        width: 120,
        itemTemplate: "<span></span>",        //指定上傳的內容模板

        //文件上傳成功以後執行的函數
        onUploadSuccess: function (file, data, response) {
          // alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);

          //跳轉到課程列表界面
          $(".btn-course").trigger("click");
        }
      });


    })
  }
})

9.圖表統計模塊 char.js 和char.html,用到的技術點

  1.在html中設置寬高和類名

    <div class="chart" style="width:600px;height:400px;border:1px solid red;"></div>

  2.基於準備好的dom,初始化echarts實例

    var myChart = echarts.init($chart.find(".chart").get(0));

  3.複製scharts提供的代碼

    var option={}

  4.基於上面的myChart實例來指定的配置項和數據顯示圖表

    myChart.setOption(option);

/**
 * 圖表統計模塊 js部分
 * Created by Administrator on 2017/7/7.
 */
define(["jquery", "text!tpls/chart.html", "echarts"], function ($, chartTpl, echarts) {
  return function () {

    //獲得chart.html字符串並轉化爲jQuery對象並把它放到HTML上
    var $chart = $(chartTpl);
    $(".menu-content-container").html($chart);

    // 基於準備好的dom,初始化echarts實例
    var myChart = echarts.init($chart.find(".chart").get(0));

    //發送ajax請求獲得男女人數和比例
    $.get("api/teacher", {}, function (res) {

      //用獲得的數據統計男女人數
      var date = res.result;
      //新建一個空對象 統計男女人數
      var genderArray = [{
          name: "男",
          value: 0
        },
        {
          name: "女",
          value: 0
        }
      ];
      date.forEach(function (v) {
        if (v.tc_gender == "0") {
          genderArray[0].value++;
        } else {
          genderArray[1].value++;
        }
      })

      var option = {

        //標題
        title: {
          text: "講師中男女比例",
          subtext: "副標題"
        },
        //懸浮框
        tooltip: {
          trigger: 'item',
          //指定了懸浮框的內容
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        //圖例
        legend: {
          //show:false,       //圖例是否可見
          //指定對齊方式
          orient: 'horizontal',
          //            x: 'left',
          right: 50, //右對齊
          data: ["男", "女"],
          textStyle: {
            //                fontFamily:"宋體",
            //                fontSize:30
          }
        },
        //數據
        series: [{
          name: '訪問來源',
          type: 'pie', //type指定了圖形的類型-->pie:餅圖
          radius: ['50%', '70%'], //分別制定了內外圓的半徑
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          //數據
          data: genderArray
        }]
      };



      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option);
    })


  }
})
//圖表控件HTML部分<div class="panel panel-default">
  <div class="panel-body">
    <ol class="breadcrumb">
      <li><a href="#">圖表統計</a></li>
      <li class="active">餅圖</li>
    </ol>
    <div class="chart" style="width:600px;height:400px;border:1px solid red;"></div>
  </div>
</div>
相關文章
相關標籤/搜索