精华内容
下载资源
问答
  • 基于scrapy爬虫框架,结巴分词,php和vue.js实现的小型搜索引擎。 a tiny search engine based on vue.js and use scrapy,jieba,php to accomplish it Build Setup# install dependencies npm install# serv

    小型搜索引擎(tinySearchEngine)

    基于scrapy爬虫框架,结巴分词,php和vue.js实现的小型搜索引擎。

    a tiny search engine based on vue.js and use scrapy,jieba,php to accomplish it

    Build Setup

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build
    
    # build for production and view the bundle analyzer report
    npm run build --report

    整体实现

    大体流程如下:

    1.爬虫爬取网页数据,保存在文件中,

    2.python读取文件内容,存到数据库表中,使用结巴分词对网页内容进行分词,并获得TF-IDF值,构建倒排索引保存到数据库中。

    3.前端界面接受用户输入,使用POST请求将数据发送到后端。

    4.后端接受到数据进行分词,然后在倒排索引数据库查询,结果取并集,然后根据倒排索引数据库结果在结果数据库中查询,返回网页的具体信息。

    5.前端收到返回后,将结果呈现出来。

    具体实现

    1.爬虫

    爬虫采用的是python的爬虫库scrapy,只需要进行简单的配置就可以使用,如果要递归爬取,可以采用class DmozSpider(CrawlSpider)

    要获得的数据网页数据主要有:url,title,description,keywords,具体配置如下:

    item['title'] = response.selector.xpath('//title/text()').extract()
    item['keywords'] = response.selector.xpath('//meta[@name="keywords"]/@content').extract()
    item['description'] = response.selector.xpath('//meta[@name="description"]/@content').extract()

    同时,为了保存数据,需要定义items,在items.py中添加如下:

    url = scrapy.Field()
    title = scrapy.Field()
    keywords = scrapy.Field()
    description = scrapy.Field()

    在终端中运行scrapy crawl dmoz -o items.json -t json,可以把数据存到items.json中。

    2.分词

    分词我选用的是python环境下的结巴分词, 在考虑了好几种分词后,最后选择了结巴分词,主要是安装简单(可以直接通过pip安装),使用方便,并且在社区的贡献下,衍生出了不同语言版本(在后端中,我采用的是结巴分词的php版本)。

    结巴分词直接提供了基于TF-IDF算法的关键词提取功能:

    jieba.analyse.extract_tags(sentence, topK=20, withWeight=False, allowPOS=())

    sentence 为待提取的文本

    topK 为返回几个 TF/IDF 权重最大的关键词,默认值为 20

    withWeight 为是否一并返回关键词权重值,默认值为 Falseallow

    POS 仅包括指定词性的词,默认值为空,即不筛选

    所以在分词过程中,可以直接通过结巴分词获得关键词,以及关键词对应的TF-IDF值。

    3.数据库

    数据库选择的是MySQL,新建数据库名python,数据库下有两个表,search_result,inverted index

    ├── python                         //数据库         
    │   ├── search_result        //搜索结果
    │   └── inverted indexsuoyin      //倒排索引

    经过爬虫爬取的数据保存在items.json中,在jsonToMySQL.py中,将文件中保存的数据存到数据库表search_result中,有index作为网页的唯一标志,字段有index_,url,title,date,description

    在urlToKeywords.py中,从表search_result中读取每一条,利用结巴分词提取关键字,并获得每个关键词的TF-IDF值,保存到表inverted index中,在查询的过程中,输入一条语句,将这条语句分词后得到关键词,将每个关键词进inverted index中查询,得到index和TF-IDF,结果取并集,根据index到search_result查询url,title等信息,利用TF-IDF之和进行页面的排序。

    4.前端

    前端采用前端框架vue.js使用vue-router实现路由管理,使用axios发送http请求。组件有两个,模仿的是百度的首页,在有输入的时候输入框位置变化(百度打开时输入框居中,有输入的时候变换到输入框在顶部),百度应该是用切换css类的方式来实现的,我采用的是切换组件,首页输入框有输入改变触发<input type='text>'input事件,触发后,实现页面跳转到结果页面,为了保持输入的数据不变,把输入框的值进行了组件间的通信,首页组件将输入值传给父组件,父组件将值传给结果子组件,并且创建钩子,在页面挂载mounted后,让输入框获得焦点

    //子组件向父组件通信,传递输入框的值
    methods: {
        change: function(){
            this.$emit('childChange',this.query)
        },
    }
    //父组件监听到子组件的事件后,实现页面跳转。
    showResult: function(data){
          //alert('hello')
          this.query=data
          console.log(this.query)
          this.$router.replace({path:'/result'})
      }  
    //子组件接受来自于父组件的值
    props: ['parentQuery'],

    mounted后,结果页面输入框获得焦点

     mounted: function(){
        var input_query=document.getElementById('input')
        input_query.focus()
      },

    前端接受的来自于后端的json数据,利用vue的列表渲染,页面选择按钮数量根据返回结果的数目确定parseInt(num/10)+1就是按钮的个数,同时采用条件渲染控制出现结果选择的时间。

    <button v-if="show_button" v-for="n in parseInt(length/10)+1" v-on:click="page_select=n">{{n}}</button>

    结果显示

        <div v-for="item in part_response">
            <a id="title" v-bind:href="item.url" target="_blank" class="item_title">{{ item.title}}</a>
            <p class="item_description">{{ item.description }}</p>
            <li id="small_url_content"><a v-bind:href="item.url" id="small_url" target="_blank">{{ item.url }}</a></li>
            <li id="date">&nbsp{{ item.date }}</li>
        </div>

    利用计算属性,只显示十个结果,并根据当前页的不同显示不同的结果。

    part_response: function(){
            var part=[]
            for(let start = (this.page_select-1)*10;start<this.page_select*10;start++){
                if(start<this.length){
                    part.push(this.response[start])
                }
            }
            //shixian guanjianzi gaoliang;
            var split_query = this.query.split("")
            console.log(split_query)
            var char
            var part_to_str =  JSON.stringify(part)
            return part
        }

    5.后端

    在后端同样需要分词,后端接受到前端发送的数据,对搜索进行分词,我采用的是结巴分词的PHP版,需要在使用的时候引入需要的PHP文件即可,但是在使用的时候要初始化,即调用Jieba::init(),但是该过程非常耗时间,搜索的绝大多数时间都消耗在此,为了测试消耗时间,我注释掉所有代码,只保留该初始化函数,发现耗时基本跟执行完整查询一致,目前还没有很好的解决方法,自己实现分词功能不是很现实。

    分词后得到几个关键词,从倒排索引数据库搜索对应结果,按照TF-IDF排序,将index从搜索结果数据库查询,返回title,url等字段,保存在二维数组中,最后使用json返回结果。

    echo json_encode($return_array);

    运行截图

    首页

    用户输入
    显示结果1

    显示结果2

    项目地址

    项目地址

    文件结构

    .
    ├── back_end.php     //后端文件,负责把接受前端的POST请求,查询后返回以json返回结果
    ├── build
    ├── config
    ├── dist         
    │   ├── index.html    //首页
    │   └── static
    │       ├── css
    │       └── js
    ├── DomzSpider.py      //爬虫文件,负责爬取网页的title,url,description保存在一个josn文件中
    ├── index.html
    ├── node_modulels      //node模块
    ├── package.json
    ├── README.md
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   ├── searchEngine.vue       //搜索的首页
    │   │   └── searchResult.vue       //搜索结果显示
    │   ├── main.js
    │   └── router                    //路由
    │       └── index.js
    ├── static
    ├── test
    ├── jsonToMySQL.py                //从json读取数据保存到MySQL数据库search_result表中
    └── urlToKeywords.py              //从数据库search_result表读取数据,利用结巴分词将获得TF-IDF,保存到                                    //inverted index表中
    

    参考

    dySE:一个 Java 搜索引擎的实现,第 1 部分: 网络爬虫

    Python抓取框架Scrapy快速入门教程

    自制简单搜索引擎

    结巴中文分词

    “結巴”中文分詞:做最好的 PHP 中文分詞、中文斷詞組件。

    For detailed explanation on how things work, checkout the guide and docs for vue-loader.

    展开全文
  • 在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑。 无法用JS 修改标签属性,从而进行的操作 比如上传图片,我们的上传是这样子的 基于这个情况,...

    在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑。

    1. 无法用JS 修改标签属性,从而进行的操作
      比如上传图片,我们的上传是这样子的
      1268169-20181126111155397-46469437.png
      基于这个情况,我不得不去使用autoit来完成上传的动作,但是,autoit是用来操作windows系统的GUI的,
      那么我的脚本,无法在Linux上运行,也无法使用浏览器的headless模式(无头模式)。

    2.某些详情页,里在控制台里通过JS可以获取到我想要的值,但是代码执行起来就是拿不到
    1268169-20181126111640392-877262112.png

    转载于:https://www.cnblogs.com/pingguo-softwaretesting/p/10019282.html

    展开全文
  • ui-vue前端UI框架基于vue2开发
  • 基于vue前端UI框架

    千次阅读 2018-09-09 11:47:07
    最近开始接触vue,来给大家推荐几个以vue为基础的前端开发框架   Element(start-28128) 官网地址 element.eleme.io/ 饿了么前端推出的基于 Vue.js 2.0 的后台组件库,它能够帮助你更轻松更快速地开发 web 项目...

    最近开始接触vue,来给大家推荐几个以vue为基础的前端开发框架

     

    Element(start-28128)  官网地址 element.eleme.io/

    饿了么前端推出的基于 Vue.js 2.0 的后台组件库,它能够帮助你更轻松更快速地开发 web 项目

    1


    iview(start-15674)  官网地址iviewui.com/

    iview一套基于 Vue.js 的高质量 UI 组件库,友好的 API ,自由灵活地使用空间,细致、漂亮的 UI。由TalkingData开发维护,有很多知名互联网企业都在使用

    1


    cube-ui(start-3583)官网地址 didi.github.io/cube-ui/#/z…

    滴滴团队开发的一套基于 Vue.js 实现的精致移动端组件库

    1


    buefy(start-3086) 官网地址buefy.github.io/#/

    基于 Bulma 的 Vue.js 轻量级 UI 组件库, 全英文版

    1


    vue-beauty(start-1569)官网地址 fe-driver.github.io/vue-beauty/…

    基于 ant design 的漂亮的 vue 组件库

    1

     

    这些都是推荐的UI库,具体哪个库最好用还得看大家实际开发中的具体解决方法哈

    新手分享,欢迎大牛们指点。

    展开全文
  • 使用基于iview搭建的vue框架vue使用的是webpack打包的。
  • Vue前端框架选型论证

    2019-05-30 23:19:44
    Vue前端框架选型论证 文章目录Vue前端框架选型论证1. 前端框架的演变1.1 前端框架的演变历史1.2 web 1.0 时代1.3 后端 MVC 时代1.4 前端 MVC 时代1.5 MVP 时代1.6 MVVM 时代2. 前端框架的演变总结3. 前端 MVVM 三大...

    Vue前端框架选型论证

    1. 前端框架的演变

    1.1 前端框架的演变历史

    从 web 1.0 -> MVC(Flux或者Redux) -> MVP -> MVVM。这段变化的过程,会让人不断琢磨,每次的变化,都是一次大的进步。现在在前端的框架都是MVVM的模式。

    1.2 web 1.0 时代

    当时,开发者们并没有前端的概念。开发一个应用,或许只要5个人的小团队,就能够很快的配置出可运行的环境。而开发的语言使用的也是最初的JSP、ASP和PHP。

    web 1.0 时代的缺点很明显,业务体系增大,调试困难:随着业务体系的增大,后台service也会逐步膨胀,大致需要建设一个开发服务器进行存放,这会导致一个问题就是前端无法在本地进行调试,每次进行修改之后,都必须上传到开发服务器进行测试(况且开发服务器可能本身就不稳定)。

    JSP代码难以维护:或许人少的时候,学JSP挺简单的。但是,一旦团队人数增多,JSP内参杂的业务逻辑也会逐渐增加,这会导致的是JSP本身难以维护。

    1.3 后端 MVC 时代

    为了解决 web 1.0 时代的缺点,为了让开发更加的便捷,代码变得更加的可维护,同时使得前后端的职责加以分离。将后端MVC化,而前端的展示则以模板的形式进行嵌套。典型的框架就是Spring、Structs。

    使用这样子的架构,复杂度被降低了,职责也会比较清晰。这个时代被称为后端的MVC时代。

    但是, 同样的这种模式存在着一些问题:

    前端页面开发效率不高:其实,早期的时候根本也没啥前端开发工程师,有的只是页面仔。更多公司可能也有后端的人使用js在写页面的。因此,问题就暴露了出来,前端所做出来的页面需要放到后端环境去运行,使得前端开发的效率并不是特别之高,因为对于后端环境的依赖程度比较大。

    前后端职责不清:由于前端并未做太多的工作,以至于后端的开发体量比较庞大。就拿路由管理来举例子,本来路由管理可以由前端开发的人员来进行开发和管理。但是,使用这种架构时,后端需要去维护一个庞大的路由表,增加了后端的开发量。

    1.4 前端 MVC 时代

    有个东西带来了前端的第一个春天——AJAX。自从Gmail的出现,ajax技术开始风靡全球。许多公司和开发者都不断地利用它做实验。有了ajax之后,前后端的职责就更加的清晰了。因为前端可以通过Ajax与后端进行数据交互。

    通过ajax与后台服务器进行数据的交换,前端开发的人员,只需要开发自己页面这部分的内容,数据可由后台进行提供。而且ajax可以使得页面实现部分刷新,极大的减少了之前需要反复开发的页面。这时,才开始有前端工程师开始慢慢从事前端。同时前端的类库也慢慢的开始发展,最著名的就是jQuery了。

    但其实,这样子的架构中还是存在一定的问题——前端缺乏一种可行的开发模式。整体的内容都杂糅在一起,一旦应用增大,就会导致难以维护了。举个例子,当图书少的时候,我们就算随意放置,整理起来都比较方便;但是,一旦具有像图书馆一样多的图书时,必须有一种统一的管理方式。同样的,前后端分离之后,前端的开发业务逐渐增多,责任也愈加的巨大,开发者急需一种比较好的框架来规范整个应用。因此,前端的MVC也随之而来。

    前端的MVC应该与后端类似,具备着View、Controller和Model。

    Model:负责保存应用数据,与后端数据进行同步

    Controller:负责业务逻辑,根据用户行为对Model数据进行修改

    View:负责视图展示,将model中的数据可视化出来。

    但是,但是前端MVC也存在一些严重的问题:

    model和view的数据交互,非常的混乱,而且维护起来非常麻烦。这就是灵活开发带来的后遗症。拿backbone举个例子,backbone将Model的set和on方法暴露出来,方便外部对其进行直接操作。

    View比较庞大,而Controller比较单薄:由于很多的开发者都会在view中写一些逻辑代码,逐渐的就导致view中的内容越来越庞大,而controller变得越来越单薄。

    1.5 MVP 时代

    MVP与MVC很接近,P指的是Presenter,presenter可以理解为一个中间人,它负责着View和Model之间的数据流动,防止View和Model之间直接交流。

    我们可以通过看到,presenter负责和Model进行双向交互,还和View进行双向交互。这种交互方式,相对于MVC来说少了一些灵活,View变成了被动视图,并且本身变得很小。虽然它分离了View和Model。但是应用逐渐变大之后,缺陷也会随之暴露。

    缺陷:由于大部分逻辑都需要presenter去进行管理,从而导致presenter的体积增大,难以维护。

    1.6 MVVM 时代

    首先,何为MVVM呢?MVVM可以分解成(Model-View-VIewModel)。ViewModel可以理解为在presenter基础上的进阶版。

    在这里View是ViewModel的外在显示,和ViewModel的数据是同步的。一旦View中的数据发生变化,会自动同步到ViewModel,然后ViewModel可以将变化的数据传给Model;反过来也是一样的,Model中的数据一旦发生改变,就会将值传给ViewModel,而ViewModel也会同步更新到view中。现在的框架实现这样的形式,各有各的不同。主要的三个框架AngularJS、Vue、React都是实现了这样子的模式。

    这种的好处就是View和Model之间被分离开来。view不知道model的存在,viewmodel和model也觉察不到view。事实上,model也完全忽略viewmodel和view的存在。这是一个非常松散耦合的设计。

    2. 前端框架的演变总结

    从前端框架的历史演变中我们可以得出结论,基于前端MVC、MVP的时代已经成为历史,MVVM更佳适合我们,所以,我们首先排除基于JQuery的EasyUI、Bootstrap等前端MVC、MVP框架,选择合适的MVVM框架,目前世界上公认的MVVM三大框架是 AngularJS、Vue、React ,所以,下面我们将从 AngularJS、Vue、React 三大框架中挑选出最合适我们的前端框架。

    3. 前端 MVVM 三大框架 AngularJS、Vue、React 对比选择

    3.1 三大框架社区活跃度对比

    社区活跃度对比:

    1. React github Star 数量:130k
    2. AngularJS github Star 数量:59.6k
    3. Vue github Star 数量:140k

    3.2 市场应用情况对比

    npm下载使用量对比:

    1. npm 统计地址:https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue

    2. npm 趋势对比

      在这里插入图片描述

    3.3 前端 MVVM 三大框架 AngularJS、Vue、React 对比选择结论

    1. 通过上面的数据可以看出:

      在市场占有排行榜上,React 市场占有量排行第一;AngularJS 市场占有量排行第二;Vue 市场占有量排行第三,从发展趋势来看,Vue 的市场占有量即将超越 AngularJS 。

      在社区活跃度排行榜上,Vue 社区活跃度排行第一,React 社区排行度第二,AngularJS 排行第三。

    2. Vue VS AngularJS:

      我们先用 Vue 和 AngularJS 进行对比,在市场占有量上,AngularJS 增长速度缓慢,Vue 增长速度最快,市场占有量即将超过 AngularJS ,在社区活跃度上对比,Vue 的活跃度是 AngularJS 的两倍多,而且 Vue 还在不断增长,综合多方面考虑,前端框架选择上,我们排除了 AngularJS 。

    3. Vue VS React:

      React 起源于 Facebook 的内部项目,当前市场占有量排行第一名,社区活跃度比Vue低,React 的属于半开源,在不涉及到 Facebook 公司以、子公司以及 与 Facebook 合作公司的利益条件下开源,否则属于专利侵权。在框架使用的复杂情况上,React 框架相对于 Vue 要复杂的多,学习成本高于Vue。综合多方便考虑,前端框架选择上,我们排除了 React 。

    4. Vue 并发支撑能力

    Vue 项目打包后,我们一般放在 Nginx 上部署,所有对于并发的支撑能力主要取决于 Nginx ,同等内存资源上,nginx 处理请求是异步非阻塞的,而apache 则是阻塞型的,在高并发下nginx 能保持低资源低消耗高性能。CDN路由 + Nginx 等技术配合,并发量没有上限,需要根据实际情况而定。

    5. Vue 研发效率

    1. Vue 拥有庞大的社区,有大量的资料方便我们研发和学习。

    2. Vue 的研发资料地址示例:

      1. vue官网文档地址:https://cn.vuejs.org/v2/guide/
      2. element官方文档地址:https://element.eleme.cn/#/zh-CN/component/installation
      3. vue菜鸟教程地址:https://www.runoob.com/vue2/vue-tutorial.html
      4. vue慕课网教程:https://www.imooc.com/video/16987
      5. vue + element + admin 范例:
        1. demo演示地址:https://panjiachen.github.io/vue-element-admin/#/dashboard
        2. Github地址:https://github.com/PanJiaChen/vue-element-admin
        3. 教程地址:https://panjiachen.github.io/vue-element-admin-site/zh/guide/
      6. vux(移动端)官方地址:https://doc.vux.li/zh-CN/components/actionsheet.html

    6. Vue 应用体积大小

    Vue 框架通过 webpack 打包,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求,webpack按需打包,按需加载,打包后的应用体积大小只有不到3M大小。

    7.响应速度

    Vue 采用虚拟化 DOM,运行和响应速度更快,而且还支持懒加载,即在需要的时候进行加载,随用随载。

    8. 响应式布局

    Vue + element 框架支持响应式布局,在手机、平板、小屏幕、大屏幕都是支持响应式的。

    9. Vue 支持的浏览器

    Vue 支持众多浏览器,例如:谷歌、360、火狐、IE等众多浏览器。

    10. Vue 能吸更多的优秀的开发参加应聘

    Vue 是前端主流框架,能吸引更多优秀的应聘者来公司面试,开发人员学会使用 Vue 开发前端页面后,在开发人员的简历里面又可以增添一项新技能。

    11. Vue 的效果演示

    演示地址:https://panjiachen.github.io/vue-element-admin/#/dashboard

    展开全文
  • 搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node、npm版本,确保环境正确 node --version npm --version 2.安装vue脚手架工具vue-cli 若开发工具为...
  • Vue前端框架选型论述

    2019-05-29 13:58:25
    Vue前端框架选型论述 1. 前端3大巨头框架综述 React 起源于 Facebook 的内部项目,社区非常活跃,下载使用当前排行第一名,但是 React 的只能是半开源,在不涉及到 Facebook 子公司或者 Facebook 合作公司利益的...
  • Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。下文是Vue的简单使用并使用nginx进行...
  • mint是一个基于vue前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验。mint已支持vue2.0。 二、安装和引入mintUI  在...
  • Vue-Mall 基于vue框架前端商城 Vue + Django项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev
  • 一、mintUI简介 mint是一个基于vue前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验。mint已支持vue2.0。二、安装和...
  • 基于vue全家桶,element-ui 提供开发规范及文件目录说明 可自动配置多开发/部署环境 重点实现的框架类功能: 登录拦截 、主题切换 、全局面包屑、进入详情页前缓存当前页数据、打包/开发环境自动化配置 插件封装(二...
  • Vue-Access-Control是基于Vue / Vue-Router / axios的前端用户权限控制解决方案,通过对路由,视图和请求的三个级别的控制,开发人员可以实现任何粒度的用户权限控制。 管理功能可以参考项目。 文献资料 下载 主页...
  • 软件开发已经从如何开发转变为如何更高效、低成本的开发。...该文基于"Vue.js"前端框架技术研究,阐述了"Vue.js"数据驱动和组件化核心思想,并就基于"Vue.js"的单页"Web"应用和项目开发工程化相关技术进行了分析。
  • vue前端UI框架整理

    千次阅读 2019-07-05 11:15:48
    整理的vue前端UI框架。 PC端: 1、Elementi:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 2、iView:一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。 3、vue-strap:...
  • vue前端框架面试问题汇总

    千次阅读 2018-04-08 14:21:00
    答:vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,496
精华内容 14,998
关键字:

基于vue的前端框架

vue 订阅