Shulou(Shulou.com)06/01 Report--

This article mainly introduces "Vuejs extension Analysis of BeetleX.FastHttpApi". In daily operation, I believe many people have doubts about Vuejs extension Analysis of BeetleX.FastHttpApi. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "Vuejs extension Analysis of BeetleX.FastHttpApi". Next, please follow the editor to study!

Web project structure of BeetleX

The above is the Beetlex gateway management plug-in, through the BeetleX.FastHttpApi.VueExtend plug-in, you only need to write the relevant .vue file in the project's views- > vue directory. Of course, the content of this vue is a little different from what you usually write in webpack, but it will be relatively simple:

Beetlex.io Home Page Controller Administration URL rewrite configuration Virtual Directory Log configuration about exiting

{data () {return {active: 'admin_home', signout: new beetlexAction (' / admin/Signout'),}}, methods: {onChange (model) {this.selected = model; this.$emit ('change', model) }, onSignout () {this.signout.asyncget () .then (r = > {page.OnSignout ();});}}, watch: {selected (val) {this.active = val },}, props: ['selected']}

It is relatively easier to use, defining only one vue structure, the corresponding import introduction is not needed, and the BeetleX.FastHttpApi.VueExtend plug-in will eventually generate these files and output a js file.

Plug-in use

Because BeetleX.FastHttpApi.VueExtend is designed for BeetleX.FastHttpApi, only Beetlex projects can be used.

Refer to the latest version before using it. After referencing this, you only need to call Vue () for HttpApiServer to create the relevant resource reference.

HttpApiServer.Vue (). Debug (); HttpApiServe.Vue (). AddScript (typeof (Program). Assembly, "vue.js", "axios.js", "beetlex4axios.js", "element.js", "autobase.js", "echarts.js")

Debug: the method is mainly used to point the interpretation directory to the views directory of the current project, so that the latest results can be refreshed when the relevant VUE files cannot be compiled. This method is based on [Conditional ("DEBUG")], so it has no effect when compiled and released.

AddScript: the method is mainly used to add fixed public js files, which are placed at the top of the generated js file after they are generated.

Page reference

BeetleX.FastHttpApi.VueExtend is only responsible for vue to generate the final js, and you need to build your own controller for page reference output:

Public object GetScript (IHttpContext context) {return context.Server.Vue () .Response (context);}

Html page reference

The component makes an automatic gzip output based on the size of the generated js, without having to deal with it by the developer. In addition to automatic gzip, components also introduce If-None-Match headers to mark changes in content, and the component automatically responds to 304if the output does not change.

Practical application effect

The existing BeetleX-related web plug-ins all use this way for plug-in UI development, which is very convenient for people who only want to use vs.net to handle both the service and the front-end work; in this way, both the front-end and the server can be integrated into one project without considering the problem of cross-domain debugging.

At this point, the study of "Vuejs extension Analysis of BeetleX.FastHttpApi" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.