精华内容
下载资源
问答
  • github笔记地址:Django+Vue

    github笔记地址:Django+Vue

    展开全文
  • 1、vue.js https://cn.vuejs.org/ 2、elementUI https://element.eleme.cn/2.0/#/zh-CN 3、echarts https://echarts.apache.org/zh/index.html 4、Animate.css https://animate.style/ 5、less ...
    展开全文
  • 最近在公司任务比较小,闲来无事就研究了一下 ASP.NET MVC+vue+axios与ASP.NET WebAPI+vue+axios实现网站开发,因为公司一直在使用ASP.NET MVC做电子政务开发,很是麻烦;自己想着有机会重构电子政务系统(想想就行~...

    前言

    最近在公司任务比较少,闲来无事就研究了一下 ASP.NET MVC+vue+axiosASP.NET WebAPI+vue+axios实现网站开发,因为公司一直在使用ASP.NET MVC做电子政务开发,很是麻烦;自己想着有机会重构电子政务系统(想想就行~~~)使得前后端分离。(其实也没写上什么内容主要写了怎么实现通过axios调用两种框架的方法)

    ASP.NET MVC+vue+axios 实现

    至于ASP.NET MVC以及vue与axios技术的使用,我在这里就不再描述了,我主要写一下怎么通过axios调用ASP.NET MVC中控制器方法。

    1. 第一步:首先你得需要有自己的控制器的方法
            [HttpPost]
            public ActionResult GetYDBPModel(string a)
            {
                return Json('result'+a);
            }
    
    1. 第二步:通过vue-cli搭建的vue环境(当然也可以不使用vue-cli),安装axios,这里我也不做详细描述了;不会的可以自行google。通过axios来调用我们的mvc中的方法:
     created:function(){
        axios.post('http://localhost:32845/NBGG/GetYDBPModel',{
            a:'cons'
        })
        // 请求成功
        .then(response=>{
          console.log(response);
        })
        // 请求失败
        .catch(error=>{
          alert("网络错误,不能访问");
        })
      }
     }
    
    1. 第三步:就是运行我们的项目vue项目:npm run dev ,会发现报错了(当然不是这么简单!):
      错误如下:

      No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’

      这个是跨域访问出现错误,下面就是解决方法:

    • 在你的mvc项目的站点的Web.config中添加如下配置(这里是配置在 <system.webServer>的节点下面):
        <httpProtocol>   
        <customHeaders>   
          <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>   
          <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>   
          <add name="Access-Control-Allow-Origin" value="*" />   
        </customHeaders>   
      </httpProtocol> 
    

    这里主要是加了 Access-Control-Allow-Origin 这个 Header, 他是W3C标准里用来检查该跨域请求是否可以被通过。 (Access Control Check)

    主要就可以实现了。

    ASP.NET WebAPI+vue+axios实现

    同样这里我也不再详细写WebAPI的详细使用。主要还是怎么实现:

    1. 第一步:同样是需要有WebAPI的项目,这里就不卖关子了直接写遇到的坑:
      同样你直接在axios中输入get地址,他也会报与上面同样的错误,是跨域请求的问题:
      No 'Access-Control-Allow-Origin' header is present on the requested resource.'
    2. 解决方法:在你的WebAPI里面新加一个类,AllowCrossSiteJsonAttribute 继承 ActionFilterAttribute类,然后重新OnActionExecuted方法:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Http.Filters;
    
    namespace webAPI.Models
    {
        public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
        {
            public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
            {
                if (actionExecutedContext.Response != null)
                    actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
    
                base.OnActionExecuted(actionExecutedContext);
            }
        }
    }
    
    1. 第三步,在WebAPI的控制器中加权限,这里有两种方法,一种是给一个请求方法加权限,另一个是给所有的也就是该控制器中所有的请求都加权限:
    • 给所有的请求加权限(直接写在控制器的上面)
        [AllowCrossSiteJson]
        public class apiController : ApiController
        {
    
            Product[] products = new Product[]
             {
                new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
                new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
                new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
            };
            public IEnumerable<Product> Get()
            {
                return products;
            }
    
            public IHttpActionResult Get(int id)
            {
                var product = products.FirstOrDefault((p) => p.Id == id);
                if (product == null)
                {
                    return NotFound();
                }
                return Ok(product);
            }
        }
    
    • 给一个请求加权限
    
        public class apiController : ApiController
        {
    
            Product[] products = new Product[]
             {
                new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
                new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
                new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
            };
            public IEnumerable<Product> Get()
            {
                return products;
            }
            [AllowCrossSiteJson]
            public IHttpActionResult Get(int id)
            {
                var product = products.FirstOrDefault((p) => p.Id == id);
                if (product == null)
                {
                    return NotFound();
                }
                return Ok(product);
            }
        }
    
    1. 第四步:将WebAPI返回的结果转换为JSON格式(这里不进行转换也可以请求到数据),在WebAPI项目中的App_start中的WebAPIConfig.cs文件中添加下面代码(我把所有的代码贴在这里):
    public static class WebApiConfig
        {
            public static void Register(HttpConfiguration config)
            {
                // Web API 配置和服务
                //将请求的结果设置为json格式
                //config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
                // Web API 路由
                config.MapHttpAttributeRoutes();
    
                config.Routes.MapHttpRoute(
                    name: "DefaultApi",
                    routeTemplate: "api/{controller}/{id}",
                    defaults: new { id = RouteParameter.Optional }
                );
            }
        }
    
    1. 第五步:接下来就是通过axios调用我们的服务,读取数据:
     created:function(){
        axios.get('http://localhost:34003/api/api')
        // 请求成功
        .then(response=>{
          console.log(response);
        })
        // 请求失败
        .catch(error=>{
          alert("网络错误,不能访问");
        })
      }
     }
    

    大功告成!

    展开全文
  • 知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有什么成就感的,想着豆瓣提供了免费的api接口,不如就利用这个接口做一个电影网站,想想还是有点小激动的! 技术栈 技术...
        

    前言:之前一直在学习原生的javascript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有什么成就感的,想着豆瓣提供了免费的api接口,不如就利用这个接口做一个电影网站,想想还是有点小激动的!

    技术栈

    技术栈当然首选vue全家桶啦,但是我这个demo是利用的豆瓣api,而且没有后台,所以vuex也就没什么用了,因此技术栈是vue + vue-router + vue-resource + vue-cli。

    功能分析

    功能参考了手机上的猫眼电影app,但是发现网上并没有在线选座的接口,于是这个功能无法实现,发现这个问题之后,赶紧去看看豆瓣api都提供什么信息,然而电影评论信息不提供,WTF!怎么办?评论信息都没有,那信息量也太少了吧,这是开源运动就显得很棒了,在github上有人提供非官方版本的api,可以获得电影的短评和长评信息!有了api开始干!

    效果预览

    图片描述

    项目主要结构

    图片描述

    路由部分

    `export default new Router({
    routes: [

    {
      path: '/inTheaters',
      name: 'inTheaters',
      component: inTheaters
    },
    {
      path: '/movie/:id',
      name: 'moviesMsg',
      component: moviesMsg
    },
    {
      path: '/comingSoon',
      name: 'comingSoon',
      component: comingSoon
    },
    {
      path: '/serchResult',
      name: 'serchResult',
      component: serchResult
    },
    {
      path: '/starMsg/:id',
      name: 'starMsg',
      component: starMsg
    },
    {
      path: '/comment/:id',
      name: 'comment',
      component: comment
    },
    {
      path: '/smallComment/:id',
      name: 'smallComment',
      component: smallComment
    },
    {
      path: '/searchPage',
      name: 'searchPage',
      component: searchPage
    }

    ]
    })`

    再来几张截图

    1
    2
    3
    4
    5
    6
    7
    8

    写在最后

    demo地址
    github地址
    觉得有用的帮忙给个star!
    ps: 本人大三狗,热爱前端,求一份前端实习工作!邮箱zhixuanziben@gmail.com

    展开全文
  • 不得不说看书是不可缺少的学习环节,书籍可以帮我们了解web前端开发知识,提升对web前端技术的理解能力,web开发的学习分为四个四阶段,每个阶段应该看的书籍罗列如下:1、HTML5+css3 主要学习pc端网站布局,...
  • Vue CLI预设允许您快速启动包含以下内容的Web扩展: 多亏了 ,构建Web扩展所需的一切( manifest.json , .zip构建...) 和 (可配置) 与 和(包括配置) 要求 Node.js> = 10和npm> = 5 文献资料 该文档可...
  • 大体样子web展示 H5内容+代码高亮开发个人博客的原因能学习前端知识和实践,对自己开发过程中遇到的问题做纪录,或许还能给别人提供帮助。也佩服能坚持写博客的人,同时希望自己也能更快成长 ,所以动手做了这个网站...
  • 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理。由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非vue的ui和插件,导致...
  • 我的数据一般都放到对应的单组件里,因为我开发的是web app,组件较多,如果请求的数据都放到new Vue里面的话,难免太乱。用多组件比较方便,当然,如果这个页面只有一个请求的化,可以直接把请求放到新建的Vue对象...
  • Web系列——Vue

    2020-12-29 20:34:34
    写在前面: 查阅「Vue官方网站」(Vue)是学习这个渐进式框架的推荐途径,很多想要搜寻的答案能在里面找到。本文记录Vue中的常用指令以及一个Vue简单案例的实现。 1. Vue的简介 Vue是一套用于构建用户界面的渐进式框架...
  • 重零开始搭建python flask+vue 小型web项目以及flask_sqlalchemy访问数据库 前言 作者是一个前端开发者,之前从未接触过python,也没接触过后端开发,所有这篇文章中有很多以前端的角度对python flask的理解,好了话...
  • 项目目标:实现一个看小说的web 1.首先准备用到的图标,用icoMoon生成自己的图标库,icoMoon使用方法网上有,但是介绍比较少,我理解是,icoMoon是一个图标集合网站,...2.开发准备+搭建Vue脚手架 安装Node.js...
  • vue前端开发必备

    千次阅读 2018-08-26 11:10:53
    vue框架前端开发所用工具及网站总结 工具列表 vue.js devtools 调试工具 AdGuard广告截器 WEB前端助手 react Developer tools 网站列表 http://www.iconfont.cn/ 阿里巴巴矢量图标管理 ...
  • 默认情况下,在VisualStudio中开发网站,会运行在IISExpress中,如果想把网站部署到本地的IIS服务器上该怎么办呢? 一、首先,以管理员身份运行VisualStudio,否则在修改项目属性时将弹出如下对话框,阻止我们修改...
  • Vue是前端快速开发框架,Javascript+手机UI,就可以迅速开发网页应用(WebApp)一般情况下,作为演示网站、微信后台等等,也够用了Weex作为一次开发,三端可用(Web、安卓、IOS),应该不错,不过现在还没正式版偶尔碰到...
  • 基于Vue.js 2.0 、Node.js(Express)、Mysql开发一个手机端视频网站 (WebDemo)总结 项目(demo)简介 手机端的视频网站。实现了视频播放、视频列表浏览、个人中心、首页信息展示、登录、注册等功能。 技术栈使用 ...
  • 从零搭建express + vue开发环境

    千次阅读 2020-02-19 14:56:38
    express框架是一个基于node.js的web应用框架,它能够帮你创建一个从前端到后端功能完整的网站vue是一个流行的前端框架,它主要是用来构建用户界面的,并且具有组件化,响应式等特点; 所以,可以这样理解:...
  • 5.用vue搭建网站web展示 先放图: 1.微博登录 新浪微博的登录不是简单的post就能解决的,他的登录有加密,所以我们要使用一定的解密算法才能正常登录微博,得到我们想要的数据。 先不要慌,第一步当然是...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 371
精华内容 148
关键字:

vue开发web网站

vue 订阅