关于sea.js的笔记
2024-09-02 16:42:35
首先，引入sea.js：(注意要直接写在Script标签里，不要写在jquery的页面加载事件里)
seajs.config({
base: "./" //seajs的基础路径（组织人事，元数据项目的模块）
,
charset: 'utf-8',
map: [
[/^(.*\.(?:css|js|html))(.*)$/i, '$1?v=_VERSION_' + '-' + '1.0']
] //加上版本号，清缓存用
//公共路径
,
paths: {
}
});
seajs.use(["app.js"]);
然后在调用其它js的时候这样写：
define(function(require, exports, module) {
var sTpl = require("views/company.html");
var VueComponent = Vue.extend({
template: sTpl,
data: function() {
return {
class1: "modal fade in",
index: 1,
rows: 8,
next: false,
path: gMain.basePath,
logo: ''
};
},
ready: function() {
this.getInfo()
},
methods: {
getInfo: function() {
var $url = gMain.basePath + 'api/company';
var resource = this.$resource($url)
resource.get({
pIndex: this.index,
pRows: this.rows
})
.then(function(response) {
var obj = eval('(' + response.data + ')');
if(obj.length == 0) {
this.show = true
this.next = false
this.$set('Complist', obj)
} else {
this.$set('Complist', obj)
if(this.index + 1 > obj[0].counts) {
this.next = false
} else
this.next = true
}
})
},
commit: function() {
var title = this.title;
var formData = new FormData($("#file")[0]);
var result;
$.ajax({
type: 'post',
dataType: "json",
async: false,
contentType: false,
processData: false,
url: gMain.basePath + "api/Company/PostFile",
data: formData,
success: function(data) {
result = data;
}
})
if(title == "新增") {
this.logo = result;
this.item.logo = this.logo;
var $url = gMain.basePath + 'api/Company/PostCompany';
var resource = this.$resource($url)
resource.save(this.item)
.then(function() {
this.getInfo();
this.$set('show', false);
})
}
if(title == "编辑") {
var b = document.getElementById("ed").src;
if(b.length > 100) {
this.logo = result;
this.item.logo = this.logo;
} else {}
var $url = gMain.basePath + 'api/Company/PutCompany';
var resource = this.$resource($url)
resource.update({
pId: this.item.company_id
}, this.item)
.then(function() {
this.getInfo();
this.$set('show', false);
})
}
},
start: function(company) {
var $url = gMain.basePath + 'api/company/PutCompanyStatus';
var resource = this.$resource($url)
resource.update({
pId: '2'
}, company)
.then(function() {
this.getInfo()
})
},
pause: function(company) {
var $url = gMain.basePath + 'api/company/PutCompanyStatus';
var resource = this.$resource($url)
resource.update({
pId: '1'
}, company)
.then(function() {
this.getInfo()
})
},
loadItem: function(company) {
this.$set('title', '编辑');
this.$set('item', company)
},
addItem: function() {
this.$set('title', '新增');
this.$set('item', {})
},
cancle: function() {
this.$set('show', false);
this.$set('class1', 'modal fade');
},
nextpages: function() {
this.index = this.index + 1
this.getInfo()
},
addPic: function(e) {
e.preventDefault();
$('input[type=file]').trigger('click');
return false;
},
previewFile: function() {
var preview = document.querySelector('a.pict img');
var rewrew = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function() {
preview.src = reader.result;
}, false);
if(rewrew) {
reader.readAsDataURL(rewrew);
}
}
}
});
module.exports = VueComponent;
});
然后注意如果要引入html文件琢模板，需要介入sea-text.js文件。
附App.js的写法：
/**
* Created by zackey on 2016/5/28.
*/
define(function (require,exports,module) {
require("components/menu.js"); //导航
require("components/loading.js"); //导航 // 路由器需要一个根组件。
var App = Vue.extend({}); // 创建一个路由器实例
var router = new VueRouter(); // 定义路由规则
router.map({
'/': {
component: function (resolve) {
require.async(['modules/Index.js'],resolve);
}
},
'/can': {
component: function (resolve) {
require.async(['modules/can.js'],resolve);
}
},
'/task': {
component: function (resolve) {
require.async(['modules/task.js'],resolve);
}
},
'/bar':{
component:function(resolve){
require.async(['modules/bar.js'],resolve);
}
},
'/foo':{
component:function(resolve){
require.async(['modules/foo.js'],resolve);
}
},
'/tool':{
component:function(resolve){
require.async(['modules/tool.js'],resolve)
}
},
'/datas':{
component:function(resolve){
require.async(['modules/datas.js'],resolve)
}
},
'/users':{
component:function(resolve){
require.async(['modules/users.js'],resolve)
}
},
'/roles':{
component:function(resolve){
require.async(['modules/roles.js'],resolve)
}
},
'/task_list':{
component:function(resolve){
require.async(['modules/task_list.js'],resolve)
}
},
'/task_save':{
component:function(resolve){
require.async(['modules/task_save.js'],resolve)
}
},
'/partner_list':{
component:function(resolve){
require.async(['modules/partner_list.js'],resolve)
}
},
'/wx_menu':{
component:function(resolve){
require.async(['modules/wx_menu.js'],resolve)
}
},
'/company':{
component:function(resolve){
require.async(['modules/company.js'],resolve)
}
}
});
//启动路由
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app'); });
最新文章
- [Qt5] How to connect c++ with QML
- CSS3-实现单选框radio的小动画
- perl中读取外部文件
- Fzu oj2194星系碰撞（排序+并查集+路径压缩）
- STS中取消show in Breadcrumb方法
- [GeekBand] STL与泛型编程(1)
- 1107: 单向公路(bfs+输入整理)（DFS也可以，而且更快）
- Leetcode题解（三）
- Tomcat设置HTTPS访问
- 将BUG管理工具（禅道）部署到服务器（测试服务器、云服务器）
- TabLayout和ViewPager
- Linux命令——head/tail
- 手动下载python更新后 换回以前版本
- webService上传图片
- Python 类变量
- selenium +chrome headless Adhoc模式渲染网页
- mongodb-mongotemplate进行地理坐标操作
- android中反射机制
- Spring Bean声明周期
- C++函数模版实现